Nauseating Pumpkin Mush

    react-splide-async
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.5 • Public • Published

    React Splide

    React Splide is the Splide component for React.

    About

    This package is a fork version of @splidejs/react-splide

    This alternate version contains:

    • Fix mount event not trigger. Refer to PR #7
    • Async load @splidejs/splide module when react component mounted. To make this react component small and also take care of SSR content.

    Installation

    Get the latest version by NPM:

    $ npm install react-splide-async

    Usage

    Components

    Import Splide and SplideSlide components:

    import { Splide, SplideSlide } from '@splidejs/react-splide';

    And render them like this:

    <Splide>
      <SplideSlide>
        <img src="image1.jpg" alt="Image 1"/>
      </SplideSlide>
      <SplideSlide>
        <img src="image2.jpg" alt="Image 2"/>
      </SplideSlide>
    </Splide>

    CSS

    Import styles if you need.

    import '@splidejs/splide/dist/css/themes/splide-default.min.css';
    // or
    import '@splidejs/splide/dist/css/themes/splide-sea-green.min.css';
    // or
    import '@splidejs/splide/dist/css/themes/splide-skyblue.min.css';

    Options

    The Splide component accepts options as an object:

    <Splide
      options={ {
        rewind : true,
        width  : 800,
        gap    : '1rem',
      } }
    >
    </Splide>

    Listening to Events

    You can listen to all Splide events through the Splide component. The callback function name is generated by the original event name, adding an "on" prefix, converted to the camelcase without colons. For example, "arrows:mounted" will be "onArrowsMounted".

    <Splide onArrowsMounted={ ( splide, prev, next ) => { console.log( prev, next ) } }>

    Note that the first argument is the splide instance, meaning original arguments are shifted by one.

    Examples

    Here is a small example:

    import React from 'react';
    import { Splide, SplideSlide } from '@splidejs/react-splide';
    
    export default () => {
      return (
        <Splide
          options={ {
            rewind : true,
            width  : 800,
            gap    : '1rem',
          } }
        >
          <SplideSlide>
            <img src="image1.jpg" alt="Image 1"/>
          </SplideSlide>
          <SplideSlide>
            <img src="image2.jpg" alt="Image 2"/>
          </SplideSlide>
          <SplideSlide>
            <img src="image3.jpg" alt="Image 3"/>
          </SplideSlide>
        </Splide>
      );
    }

    More examples:

    License

    React Splide and Splide are released under the MIT license.
    © 2020 Naotoshi Fujita

    Install

    npm i react-splide-async

    DownloadsWeekly Downloads

    96

    Version

    1.1.5

    License

    MIT

    Unpacked Size

    27.9 kB

    Total Files

    16

    Last publish

    Collaborators

    • nonjene