Skip to main content

Bear migration to Acrool

From Bear to Acrool, there have been some changes.

Change JS Import​

import BearReactCarousel from 'bear-react-carousel';
// Change
import AcroolReactCarousel from '@acrool/react-carousel';

Change CSS Import​

import 'bear-react-carousel/dist/index.css';
// 改為
import '@acrool/react-carousel/dist/index.css';

Search and Replace Text​

bear
// 改為
acrool

Remove elClassName​

Remove elClassName and replace it with pure className (because synchronized names increase maintenance difficulties) This is the old comparison chart.

export default {
    root: 'acrool-react-carousel__root',
    content: 'acrool-react-carousel__content',
    container: 'acrool-react-carousel__container',
    containerInit: 'acrool-react-carousel__container-init',
    slideItem: 'acrool-react-carousel__slide-item',
    slideItemImage: 'acrool-react-carousel__slide-item__image',
    slideItemCard: 'acrool-react-carousel__slide-item__card',
    navGroup: 'acrool-react-carousel__nav-group',
    navPrevButton: 'acrool-react-carousel__nav-prev-button',
    navNextButton: 'acrool-react-carousel__nav-next-button',
    navIcon: 'acrool-react-carousel__nav-icon',
    paginationGroup: 'acrool-react-carousel__pagination-group',
    paginationButton: 'acrool-react-carousel__pagination-button',
    paginationContent: 'acrool-react-carousel__pagination-content',

    testNumber: 'acrool-react-carousel__test-number',
    testWindowSize: 'acrool-react-carousel__window-size',
    cloneIconGroup: 'acrool-react-carousel__clone-icon-group',
    cloneIcon: 'acrool-react-carousel__clone-icon',
};

For example, the old places used

const ReactCarousel = styled(AcroolReactCarousel)`
    .${navGroup}{
        height: 66px;   
    }    
`;

Change

const ReactCarousel = styled(AcroolReactCarousel)`
    .acrool-react-carousel__nav-group{
        height: 66px;   
    }    
`;