react-glider's Introduction

react-glider

A react wrapper for glider.js

Developing

yarn
yarn storybook

CSS

To use the CSS for glider.js in your app either include the css in your head.

<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/glider.min.css"
/>

or just include it in your project if it is set up for that.

import 'glider-js/glider.min.css';

Demo Defaults

This package also exposes the CSS used to render the demo.

import Glider from 'react-glider/glider.defaults.css';

Perspective View

The CSS for the perspective view is not included in glider.js or this package. You can find it in .storybook/preview-head.html in the style tag. Please do not file bugs for it as I do not want to support it.

Usage

Glider Methods

To get access to the current glider instance this react component exposes a ref.

import React from 'react';
import Glider, { GliderMethods } from 'react-glider';

const PaneExample: React.FC<PaneProps> = ({ children, style, className }) => (
  <div className={`glider-slide ${className}`} style={style}>
    <h1>{children}</h1>
  </div>
);

const example = () => {
  const gliderRef = React.useRef<GliderMethods>(null);

  return (
    <>
      <button onClick={() => gliderRef.current?.destroy()}>Destroy!</button>

      <Glider ref={gliderRef}>
        <PaneExample>1</PaneExample>
        <PaneExample>2</PaneExample>
        <PaneExample>3</PaneExample>
        <PaneExample>4</PaneExample>
      </Glider>
    </>
  );
};

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Andrew Lisowski} 💻 🎨 📖 🚇 🚧	_{Adam Misiorny} 💻	_zeelMT 💻	_vinkodlak 💻	_{stanislavvasilyev-sravni} 💻	_{Kevin Farrugia} 💻	_hotscotch92 💻
_{Moe Shaaban} 📖 💻