bear-react-gantt
v0.0.1-test.0
Published
Most modern mobile touch slider with hardware accelerated transitions for ReactJS
Downloads
10
Readme
Features
- Use React + Flexbox directly, not javascript in secondary development into React
- Easier to use
- Use Flexbox instead of adding inline Style to gantt items
- Number of times to avoid re-renders by key in gantt items or switch memo cache
- There is no need to set the style of the project, Bear React Gantt directly provides the components of your project, you only need to set the image URL and form an array, and put it in the data parameter.
- The size of the gantt, the height of the outer container is based, and the item container follows the size of the outer container
Supports
- Supports both Web, Mobile
- Responsive setting parameters
- Navigation buttons can be directly moved out of the gantt area without being affected by overflow in simple usage situations
- Prevent onClick of gantt item from triggering on swipe
- Provide project scale setting + additional fixed size or fixed height setting
- Support two-way synchronous control of the second Gantt
- Support center mode
- Support gantt auto display items
- Support auto play
Install
yarn add bear-react-gantt
Usage
import BearGantt, {TBearSlideItemDataList, BearSlideImage} from 'bear-react-gantt';
import 'bear-react-gantt/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 data: TBearSlideItemDataList = images.map(row => {
return {
key: row.id,
// BearSlideImage or BearSlideCard
children: <BearSlideImage imageUrl={row.imageUrl}/>
};
});
export const CustomBanner = () => {
return <BearGantt
data={data}
height="200px"
/>
}
There is also a codesandbox template that you can fork and play with it:
Use Nextjs example
License
MIT © imagine10255