JSPM

react-sled is a carousel made with react-spring.

• Super-smooth spring animations (thanks to react-spring)
• Lightweight and performant architecture
• Touch- and Mousedrag (thanks to react-with-gesture)
• Easy to style
• Ready for server-side-rendering
• All props are dynamically changeable
• (Should be) Compatible with older Browsers from Internet Explorer 11 (Needs testing!)

🛷 Have a look at the example!

New Major release 2.0

Breaking Changes:

• Removed styled-components
• Removed custom ow-unit
• Use react-spring Version 9 and react-with-gesture Version 7

New Features:

• Full Type-Script support
• Vertical Sliding
• Set fixed proportion
• Show multiple elements at once (showElements)
• Move by multiple elements (slideBy)

Install

Install all dependencies via Yarn or NPM.

yarn add react-sled react-spring@next react-use-gesture react react-dom

Usage

import React from "react";
import { Sled, Views, Progress, Control } from "react-sled";
import "react-sled/dist/main.css";

const images = ["my-image-1.jpg", "my-image-2.jpg"];

const App = () => {
  return (
    <Sled>
      <Views>
        {images.map((image, index) => (
          <img key={image} src={image} alt={`My Image #${index}`} />
        ))}
      </Views>
      <Progress />
      <div className="controls arrows">
        <Control select="prev" />
        <Control select="next" />
      </div>
      <div className="controls dots">
        {images.map((image, index) => (
          <Control key={image} select={index} />
        ))}
      </div>
    </Sled>
  );
};

export default App;

Sled

Sled is the wrapper-component. It takes no props.

Views

Render all your views into this component. It takes these optional props:

Controls

There is only one control-component for Arrows and Selecting-Dots. The prop select decides what the Control-element is: A string called next or prev will activate Arrow-functionality, a number Select-functionality.

You can easily style it via CSS. The default-styles are scoped to the class-name sled-progress-default. They are contained in the file dist/index.css. If you give it a custom className-prop, the default-class will be overridden and the Progress will be completely unstyled. Then you can copy the default-styles from here as a starting-point.

Control Props Overview:

Arrow: Default-Design:

<Control
  select="next"
/>

Your Custom-Design:

<Control
  select="next"
  className="custom"
  style={{
    background: 'red'
  }}
>
  My custom arrow!
</Control>

Selection-Dot:

<Control
  select={1}
/>

Progress

react-sled has an Instagram-like progress-bar. You can easily style it via CSS. The default-styles are scoped to the class-name sled-progress-default. If you give it a custom className-prop, the Progress will be completely unstyled. You can copy the default-styles from here as a starting-point.

Progress Props Overview:

<Progress
  className="my-progress"
  style={{ background: 'red' }}
/>

useSledStore

A hook, that exposes the plugin’s state-management. useSledStore is only useable inside the Sled-Component. It returns an Array with 2 elements:

1. state of type object
2. dispatch of type function

To-Do

• Control animation by frame on drag
• Infinity-Mode
• Nice documentation with live examples (using Docz)
• automated testing

Contributing

Every contribution is very much appreciated.

If you like react-sled, don't hesitate to star it on GitHub.

License

MIT © AndreasFaust

Thanks

This library is derived from the great work and especially this code-sandbox-example provided by Paul Henschel and the react-spring-team.