preact-glide

1.1.8 • Public • Published

Preact Glide

A simple wrapper for creating Glide JS carousels with Preact components

Contents

Installation

npm install preact-glide

Basic Example

const Carousel = require('preact-glide')

const App = () => {
  return (
    <Carousel>
      {slides.map(slide => (
        <div>Slide</div>
      ))}
    </Carousel>
  )
}

Styles

Component

Automatically include styles. Uses glideClass if set.

const App = () => {
  return <Carousel styles>{slides}</Carousel>
}

Import

Less Import

@import './node_modules/preact-glide/styles/carousel.less';

Overriding default className

In the case that you are using a non-standard className (when overriding glideClass prop) you can override the default @glideClass less variable as follows:

@import './node_modules/preact-glide/styles/carousel.less';
@glideClass: ~'.new-class';

Scss Import

@import './node_modules/preact-glide/styles/carousel.scss';

Overriding default className

In the case that you are using a non-standard className (when overriding glideClass prop) you can override the default $glideClass less variable as follows:

@import './node_modules/preact-glide/styles/carousel.scss';
$glideClass: '.new-class';

Props

glideClass

(String)

Used to override the default Glide className glide.

Example:

const App = () => {
  return (
    <Carousel glideClass={'new-class'}>
      {slides.map(slide => (
        <div>Slide</div>
      ))}
    </Carousel>
  )
}

glideOptions

(Object)

Glide JS options object: https://glidejs.com/docs/options/

glideComponents

(Object)

Glide JS Components object: https://glidejs.com/docs/extending-components/

glideEvents

(Array)

List of Glide events with callbacks. Events are passed in the following format:

{
  event: '' // Event name
  cb: () => {} // Callback function
}

Example:

const glideEvents = [
  {
    event: 'run.after'
    cb: () => alert('Hello, world!')
  }
]

arrows

(Boolean | Component)

Set true to use default component.

Example (Default):

const App = () => {
  return (
    <Carousel arrows>
      {slides.map(slide => (
        <div>Slide</div>
      ))}
    </Carousel>
  )
}

Example (Custom Component):

const CustomArrows = () => <div>Arrows</div>

const App = () => {
  return (
    <Carousel arrows={<CustomArrows />}>
      {slides.map(slide => (
        <div>Slide</div>
      ))}
    </Carousel>
  )
}

bullets

(Boolean | Component)

Set true to use default component.

Example (Default):

const App = () => {
  return (
    <Carousel bullets>
      {slides.map(slide => (
        <div>Slide</div>
      ))}
    </Carousel>
  )
}

Example (Custom Component):

const CustomBullets = () => <div>Bullets</div>

const App = () => {
  return (
    <Carousel bullets={<CustomBullets />}>
      {slides.map(slide => (
        <div>Slide</div>
      ))}
    </Carousel>
  )
}

controls

(Boolean | Component)

Set true to use default component.

Example (Default):

const App = () => {
  return (
    <Carousel controls>
      {slides.map(slide => (
        <div>Slide</div>
      ))}
    </Carousel>
  )
}

Example (Custom Component):

const CustomControls = () => <div>Controls</div>

const App = () => {
  return (
    <Carousel controls={<CustomControls />}>
      {slides.map(slide => (
        <div>Slide</div>
      ))}
    </Carousel>
  )
}

styles

(Boolean)

Set true to include default styles - uses glideClass by default.

Example:

const Carousel = require('preact-glide')

const App = () => {
  return (
    <Carousel styles>
      {slides.map(slide => (
        <div>Slide</div>
      ))}
    </Carousel>
  )
}

title

(Component)

Used to pass in a component that sits above the carousel.

Example:

const Carousel = require('preact-glide')

const Title = () => <div>Title</div>

const App = () => {
  return (
    <Carousel title={<Title />}>
      {slides.map(slide => (
        <div>Slide</div>
      ))}
    </Carousel>
  )
}

Slide Events

onView

A function that will fire when the slide comes into view.

Note: The onView prop must be on the top most element.

Example:

const Carousel = require('preact-glide')

const App = () => {
  return (
    <Carousel>
      {slides.map(slide => (
        <div onView={() => alert('Viewed')}>Slide</div>
      ))}
    </Carousel>
  )
}

onClick

Bypasses a slight bug with GlideJs where dragging the top most element would also count as a 'click'.

Overrides the default onClick property on the top most element. Fires the function only when a 'click' occurs, not on 'drag'.

Note: Only overrides the onClick for the top most element.

Example:

const Carousel = require('preact-glide')

const App = () => {
  return (
    <Carousel>
      {slides.map(slide => (
        <div onClick={() => alert('Clicked')}>Slide</div>
      ))}
    </Carousel>
  )
}

Components

Single components can be exported from preact-glide/components

const {
  Arrows,
  Bullets,
  Container,
  Controls,
  Title,
  Track
} = require('preact-glide/components')

Arrows

  • glideClass - Override default glide class
  • arrows - Override default component
const { Arrows } = require('preact-glide/components')

const App = () => {
  return <Arrows />
}

Bullets

  • glideClass - Override default glide class
  • bullets - Override default component
  • children - Array of Slides
const { Bullets } = require('preact-glide/components')

const App = () => {
  return <Bullets>{arrayOfSlides}</Bullets>
}

Container

  • glideClass - Override default glide class
const { Container } = require('preact-glide/components')

const App = () => {
  return <Container />
}

Controls

  • glideClass - Override default glide class
  • controls - Override default component
const { Controls } = require('preact-glide/components')

const App = () => {
  return <Controls />
}

Title

  • glideClass - Override default glide class
  • title - Component or string to be rendered
const { Title } = require('preact-glide/components')

const App = () => {
  return <Title />
}

Track

  • glideClass - Override default glide class
  • children - Array of Slides
const { Track } = require('preact-glide/components')

const App = () => {
  return (
    <Track>
      {arrayOfSlides}
    <Track/>
  )
}

Hooks

The hooks can be exported from preact-glide/hooks

const { useGlide } = require('preact-glide/hooks')

useGlide

Takes an object as a parameter with the following properties

const { useGlide } = require('preact-glide/hooks')

const App = () => {
  const carouselRef = useRef()

  useGlide({ carouselRef })

  return (
    <div className={`glide`} ref={carouselRef}>
      <div className={`glide__track`} data-glide-el='track'>
        <ul className={`glide__slides`}>
          <li className={`glide__slide`}>Slide</li>
        </ul>
      </div>
    </div>
  )
}

Note: HTML structure inside carouselRef will need to contain the glide structure and classes

Readme

Keywords

none

Package Sidebar

Install

npm i preact-glide

Weekly Downloads

2

Version

1.1.8

License

ISC

Unpacked Size

38.9 kB

Total Files

26

Last publish

Collaborators

  • tobytheghost