@videodock/tile-slider
v0.4.1TypeScript
Performant and accessible React slider with virtualization.
0/weekUpdated 2 months agoMITUnpacked: 69.8 KB
Published by christiaan
npm install @videodock/tile-sliderTile Slider
Performant and accessible React slider with virtualization.
Introduction
@videodock/tile-slider is a React component of a performant and accessible slider written in React.
It only renders the visible tiles, meaning that you can have thousands of items and still get a good performance.
TileSlider is fully written using React and doesn't have dependencies.
Documentation
Visit the documentation with examples
Using v1, see the v1 branch.
Features
- Virtualized rendering
- Custom pagination
- Custom controls
- Custom slide transition
- Fully responsive using CSS
- Accessible
- First-class TypeScript support
Requirements
- react >= 17
- react-dom >= 17
Installation
Install this package via (P)NPM or Yarn:
``shell`
$ yarn add @videodock/tile-slider
$ npm install @videodock/tile-slider
$ pnpm install @videodock/tile-slider
Example usage
> Important: .css file import requirement (version 1.0.1 and above)
> Starting from version 1.0.1, it's crucial to include the .css import explicitly, as demonstrated in the example
> below:
`tsx
import { TileSlider, CYCLE_MODE_RESTART } from '@videodock/tile-slider';
import '@videodock/tile-slider/lib/style.css';
type Data = { title: string; imageUrl: string };
const items: Data[] = Array.from({ length: 1000 }).map((_, index) => ({
title: Item #${index + 1},
imageUrl: 'https://via.placeholder.com/350x150',
}));
const App: React.FC = () => { {item.title}
return (
items={items}
tilesToShow={6}
spacing={8}
cycleMode={CYCLE_MODE_RESTART}
renderLeftControl={({ onClick, disabled }) => (
)}
renderRightControl={({ onClick, disabled }) => (
)}
renderTile={({ item, isVisible }) => {
// you can do further performance optimizations for tiles that are not visible.
return () => (
url(${item.imageUrl}) }}>
);
}}
/>
);
};
export default App;
`
Release
To create a release, perform the following steps:
Create a new version using yarn version. Follow semver rules to determine the next version.
When the script completes, a page is automatically opened to create a new GitHub release with all information filled in.
Before creating the GitHub release, the commit and tag must be pushed to GitHub. After doing so, refresh the new
release page so it detects the existing tag. After creating the GitHub release, the version is automatically published
to NPM.
`shell`
$ yarn version
Documentation
Run the documentation app, which showcases all features of the TileSlider package:
`shell`
cd docs
yarn
yarn start
You can use the --host 0.0.0.0 argument to make the dev server available on your local network:
`shell``
yarn start --host 0.0.0.0