https://github.com/sanderdebr/react-draggable-slider
NPM package for my custom Draggable React Slider using React Spring and GSAP.
https://github.com/sanderdebr/react-draggable-slider
Last synced: about 1 year ago
JSON representation
NPM package for my custom Draggable React Slider using React Spring and GSAP.
- Host: GitHub
- URL: https://github.com/sanderdebr/react-draggable-slider
- Owner: sanderdebr
- Created: 2020-06-07T10:46:19.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T08:11:46.000Z (over 3 years ago)
- Last Synced: 2025-04-13T11:12:16.151Z (about 1 year ago)
- Language: JavaScript
- Size: 2.34 MB
- Stars: 15
- Watchers: 1
- Forks: 2
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-draggable-slider
[]()
NPM package for my custom Draggable React Slider using React Spring and GSAP.
## Installation
```
npm install react-draggable-slider --save-dev
```
### Demo
https://sanderdebr.github.io/react-draggable-slider/
[](https://codesandbox.io/s/agitated-christian-rlg5j?fontsize=14&hidenavigation=1&theme=dark)
## Usage
Add `` component with sliderSettings object, the only required setting an array of slider items.
```jsx
import { Slider } from "react-draggable-slider";
import { projectList } from "./data";
function App() {
const sliderSettings = {
data: projectList,
speed: 3000,
easing: "elastic",
bgColor: "rgba(255, 255, 255, 0.05)",
buttonHref: "https://www.google.com",
buttonTarget: "_self",
buttonText: "View project",
showButton: true,
};
return ;
}
```
Use the following structure for your slider items:
```javascript
export const projectList = [
{
title: "Cutting Edge Project",
image: "https://source.unsplash.com/collection/347317/",
description: "Praesent quis congue nisi...",
},
{
title: "Featured Artist 3D",
image: "https://source.unsplash.com/collection/3573299/",
description: "Duis at tellus vitae velit aliquet varius...",
},
];
```
> **Note:** although the above example uses hooks, react-draggable-slider is compatible with Class-based components. However, since it internally uses hooks, it requires React `16.8+`.
### Props
The sliderSettings prop in `` component accepts the following props:
| Name | Type | Description | Default Value |
| ------------ | --------- | ------------------------------------------------------------------------------------ | --------------------------- |
| `data` | `array` | array of slider items, see below which structure you may use | `[]` |
| `speed` | `number` | speed of sliding to next item when dragged in milliseconds | 3000 (3 seconds) |
| `easing` | `string` | 4 available GSAP easings to animate the sliding: "power", "back", "elastic", "expo". | ease |
| `bgColor` | `string` | Set background-color of the whole slider, accepts HEX and RGB(A). | `rgba(255, 255, 255, 0.05)` |
| `buttonText` | `string` | Text inside button per item | `View case study` |
| `showButton` | `boolean` | If a button should be shown for all items | `true` |
### Using
- React Spring
- GSAP
- Styled Components