bear-react-jackpot v0.0.2-alpha.0

Features

• Use React + Flexbox directly, not javascript in secondary development into React
• Easier to use

Install

yarn add bear-react-jackpot

Usage

import BearCarousel, {TBearSlideItemDataList, BearSlideItem} from 'bear-react-jackpot';
import 'bear-react-jackpot/dist/index.css';

const images = [
        {id: 1, imageUrl: "https://dummyimage.com/900x400/dee2e6/6c757d.jpg"},
        {id: 2, imageUrl: "https://dummyimage.com/900x400/dee2e6/6c757d.jpg"},
        {id: 3, imageUrl: "https://dummyimage.com/900x400/dee2e6/6c757d.jpg"},
    ];
    
const bearSlideItemData: TBearSlideItemDataList  = images.map(row => {
        return {
            key: row.id,
            children: <BearSlideItem imageUrl={row.imageUrl}/>
        };
    });


export const CustomBanner = () => {
    return <BearCarousel 
        data={bearSlideItemData}
        staticHeight="200px"
    />
}

There is also a codesandbox template that you can fork and play with it:

if your need control by out component

const CustomBanner = ({
    const [carousel, setCarousel] = useState<IBearCarouselObj>();
  
    const goToPage = (index: number): void => control?.goToPage(index);
    const getPageTotal = (): number => control?.info.pageTotal ?? 0;

    <BearCarousel
        setCarousel={setCarousel}
        data={bearSlideItemData}
        staticHeight="250px"/
    />
}

License

MIT © imagine10255