Tile 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:

$ 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:

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 = () => {
  return (
    <TileSlider<Data>
      items={items}
      tilesToShow={6}
      spacing={8}
      cycleMode={CYCLE_MODE_RESTART}
      renderLeftControl={({ onClick, disabled }) => (
        <button onClick={onClick} disabled={disabled}>
          Slide left
        </button>
      )}
      renderRightControl={({ onClick, disabled }) => (
        <button onClick={onClick} disabled={disabled}>
          Slide right
        </button>
      )}
      renderTile={({ item, isVisible }) => {
        // you can do further performance optimizations for tiles that are not visible.
        return () => (
          <div style={{ width: 350, height: 120, backgroundImage: `url(${item.imageUrl})` }}>
            <p>{item.title}</p>
          </div>
        );
      }}
    />
  );
};

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.

$ yarn version

Documentation

Run the documentation app, which showcases all features of the TileSlider package:

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:

yarn start --host 0.0.0.0