Migration to 4.x version

From version 0 to version 4, there have been some changes. In addition to splitting from business logic, in order to make parameters and scope clearer, you need to change them accordingly

BearSlideItem

Splitting into different components is to better distinguish props

v0

import {BearSlideItem} from 'bear-react-carousel';

const data = infos.map(row => {
    return {
        key: row.id,
        children: <BearSlideItem as="card">  {/* or image **/}
            {row.name}
        </BearSlideItem>
    }
});

v4.x Change to

import {BearSlideCard, BearSlideImage} from 'bear-react-carousel';

const data = infos.map(row => {
    return {
        key: row.id,
        children: <BearSlideCard>   {/* or BearSlideImage **/}
            {row.name}
        </BearSlideCard>
    }
});

As for the parameters, you can refer to BearSlideCard / BearSlideImage

PageContent

Old in BearSlideItem, since this should be a page, not an item

import BearCarousel, {BearSlideItem} from 'bear-react-carousel';

const data = infos.map(row => {
    return {
        key: row.id,
        pageContent: <>{row.name}</>,
        children: <BearSlideItem as="card">  {/* or image **/}
            {row.name}
        </BearSlideItem>
    }
});

Change to

import BearCarousel, {BearSlideItem} from 'bear-react-carousel';

const data = infos.map(row => {
    return {
        key: row.id,
        children: <BearSlideCard>   {/* or BearSlideImage **/}
            {row.name}
        </BearSlideCard>
    }
});

<BearCarousel
    data={data}
    isEnablePageContent
    renderPagination={(pageTotal: number) => {
        return foodImages.map(row => {
            return <CustomPage key={row.id}>{row.title}</CustomPage>;
        });
    }}
/>

If you need a reference case, you can get it from auto-play-progress

Height

This attribute should be one of the two, so I merged it into the same attribute

staticHeight -> height
aspectRatio -> height

Static Height

<BearCarousel
    data={data}
    staticHeight="200px"
/>

change to

<BearCarousel
    data={data}
    height="200px"
/>

AspectRatio

<BearCarousel
    data={data}
    aspectRatio={{widthRatio: 32, heightRatio: 9}}
/>

change to

<BearCarousel
    data={data}
    height={{widthRatio: 32, heightRatio: 9}}
/>

Status status dataset

[data-active="true"]{...}
[data-first-page="true"]{...}
[data-last-page="true"]{...}

change to

[data-active]{...}
[data-first-page]{...}
[data-last-page]{...}