glissando-react

Glissando for React

A simple content slider for anything that needs to move.

• API
• Demos
  • Standalone use
  • Directed use
• Usage
  • Standalone use
  • Directed use
• Size

API

See: Main documentation

Demos

• All examples

Standalone use

• Simple example
• Kitchen sink

Directed use

• With React Router and TypeScript
• Nested routes with React Router and TypeScript

Usage

Standalone use

Import the component and model factory and slider CSS:

import { GlissandoSlider, useGlissandoModel } from 'glissando-react'
import 'glissando-react/glissando.global.min.css'

Create a new model instance:

const model = useGlissandoModel();

Use the slider component. Pass the model as a prop and the pages as children.

<GlissandoSlider model={model}>
  <Page1 />
  <Page2 />
  <Page3 />
  {/* ... add as many as needed - only 3 will be rendered */}
</GlissandoSlider>

The pages can be added and removed dynamically. Each time the GlissandoSlider's children change, the model is updated automatically.

Control the slider with methods and query its state using selectors:

const Slider = () => {
  const { previous, next, hasPrevious, hasNext, isAnimating } = model

  return (
    <>
      <button
        type="button"
        onClick={() =>
          previous()
        }
        disabled={!hasPrevious() || isAnimating()}
      >
        Previous
      </button>
      <button
        type="button"
        onClick={() => next()}
        disabled={!hasNext() || isAnimating()}
      >
        Next
      </button>
      <GlissandoSlider model={model}>
        <Page1 />
        <Page2 />
        <Page2 />
      </GlissandoSlider>
   </>
  )
}

Directed use

Use application state to tell the slider what to show:

const pages = ["page-1", "page-2", "page-3"];

const Slider = () => {
  const match = useRouteMatch();
  const currentPage = match.params.page;

  return (
    <GlissandoSlider model={model} locations={pages} location={currentPage}>
      {pages.map(id => {
        return <Page key={id} location={id} />;
      })}
    </GlissandoSlider>
  );
};

The counterparts of component props locations and location are model selectors getLocation, getNextLocation and getPreviousLocation:

const Header = ({ model }) => {
  const history = useHistory();

  const {
    isAnimating,
    getLocation,
    getNextLocation,
    getPreviousLocation,
  } = model;
  const location = getLocation();
  const previousLocation = getPreviousLocation();
  const nextLocation = getNextLocation();

  return (
    <>
      <button
        type="button"
        onClick={() => history.push(previousLocation)}
        disabled={!previousLocation || isAnimating()}
      >
        Previous
      </button>
      <button
        type="button"
        onClick={() => history.push(nextLocation)}
        disabled={!nextLocation || isAnimating()}
      >
        Next
      </button>
    </>
  );
};

Size

7.6 KB with all dependencies, minified and gzipped