@silas-test/molecules-slider 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +85 -0
- package/index.cjs.js +3384 -0
- package/index.d.ts +1 -0
- package/package.json +14 -0
- package/src/index.d.ts +2 -0
- package/src/lib/molecules-slider.d.ts +5 -0
- package/src/lib/molecules-slider.stories.d.ts +11 -0
- package/src/lib/molecules-slider.style.d.ts +585 -0
- package/src/lib/molecules-slider.type.d.ts +51 -0
package/README.md
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
# Slider Component
|
|
2
|
+
|
|
3
|
+
The **Slider** component is a customizable React component that displays Slides that will automaticaly change in an animated way to show content in a horizontal view.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
To use the **Slider** component, you need to install the required dependencies:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @silas-test/molecules-slider
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
or
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
yarn add @silas-test/molecules-slider
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
You can utilize the **Slider** component by importing it and including it in your JSX. Here's an example:
|
|
22
|
+
|
|
23
|
+
```jsx
|
|
24
|
+
import React from 'react';
|
|
25
|
+
import { Slider, SliderItem } from '@silas-test/molecules-slider';
|
|
26
|
+
import { BolttechThemeProvider } from '@silas-test/frontend-foundations';
|
|
27
|
+
import { bolttechTheme } from '@silas-test/default-theme';
|
|
28
|
+
|
|
29
|
+
function App() {
|
|
30
|
+
return (
|
|
31
|
+
<BolttechThemeProvider theme={bolttechTheme}>
|
|
32
|
+
<Slider>
|
|
33
|
+
<SliderItem>
|
|
34
|
+
<p>slide 1</p>
|
|
35
|
+
</SliderItem>
|
|
36
|
+
<SliderItem>
|
|
37
|
+
<p>slide 2</p>
|
|
38
|
+
</SliderItem>
|
|
39
|
+
<SliderItem>
|
|
40
|
+
<p>slide 3</p>
|
|
41
|
+
</SliderItem>
|
|
42
|
+
<SliderItem>
|
|
43
|
+
<p>slide 4</p>
|
|
44
|
+
</SliderItem>
|
|
45
|
+
<SliderItem>
|
|
46
|
+
<p>slide 5</p>
|
|
47
|
+
</SliderItem>
|
|
48
|
+
</Slider>
|
|
49
|
+
</BolttechThemeProvider>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
export default App;
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Props
|
|
57
|
+
|
|
58
|
+
The **Slider** component accepts the following props:
|
|
59
|
+
|
|
60
|
+
| Prop | Type | Description |
|
|
61
|
+
| --------------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
|
62
|
+
| `id` | `string` | Component identification. |
|
|
63
|
+
| `dataTestId` | `string` | React-testing-library identification. |
|
|
64
|
+
| `currentPage` | `number` | The current page of the slider. |
|
|
65
|
+
| `slidesPerPage` | `number` | Number of slides that should be shown per page. On mobile, it will automatically be 1 |
|
|
66
|
+
| `showArrows` | `boolean` | Boolean representing if the arrows for next and previous page should be displayed. On mobile, they will be automatically hidden. |
|
|
67
|
+
| `showBullets` | `boolean` | Boolean representing if the bullets representing the pages should be displayed. |
|
|
68
|
+
| `duration` | `number` | Durations in milliseconds of each slide. If 0 is provided, they will not change automatically. |
|
|
69
|
+
| `count` | `number` | If provided, this will be used to count the number of slides. If not, the Slider will count it automatically. |
|
|
70
|
+
| `onChange` | `(index?: number) => void` | Function that runs when a slide change if you need to run any code when it changes. |
|
|
71
|
+
| `children` | `ReactNode` | The content of the Sliders. This should be a SliderItem with the content inside. |
|
|
72
|
+
|
|
73
|
+
## Functionality
|
|
74
|
+
|
|
75
|
+
The **Slider** component provides the following functionality:
|
|
76
|
+
|
|
77
|
+
- Can have multiple slides per page.
|
|
78
|
+
- Automaticaly change slides based on the duration provided.
|
|
79
|
+
- Can stay on the same slide indefinetly if `duration={0}` provided.
|
|
80
|
+
- Needs to be dragged at least 75px to change slides, if not, it will stay on the same slide.
|
|
81
|
+
- On mobile (767px and lower) it will always display only 1 slide per page.
|
|
82
|
+
|
|
83
|
+
## Contributions
|
|
84
|
+
|
|
85
|
+
Contributions to the **Slider** component are welcomed. If you encounter issues or have suggestions for improvements, feel free to open an issue or submit a pull request on the component's Bitbucket repository.
|