Skip to content

Commit 16ab61e

Browse files
scriptexscriptex
committed
Update the demo
1 parent cccfb2f commit 16ab61e

File tree

6 files changed

+1024
-885
lines changed

6 files changed

+1024
-885
lines changed

‎README.md

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ The slides (or items) should have the following shape:
5656
import * as React from 'react';
5757
import { createRoot } from 'react-dom/client';
5858

59-
import { Carousel, CarouselItem } from 'react-round-carousel';
59+
import { Carousel, CarouselRef, CarouselItem } from 'react-round-carousel';
6060

6161
// Create an array of Carousel Items
6262
const items: CarouselItem[] = Array(20)
@@ -72,7 +72,11 @@ const items: CarouselItem[] = Array(20)
7272
)
7373
}));
7474

75-
const App = () => <Carousel items={items} />;
75+
const App = () => {
76+
const carouselRef = React.createRef<CarouselRef>();
77+
78+
return <Carousel ref={carouselRef} items={items} slideOnClick />;
79+
};
7680

7781
createRoot(document.getElementById('root')!).render(<App />);
7882
```
@@ -89,6 +93,19 @@ The component accepts the following configuration options as props:
8993
| `nextButtonContent` | `string/ReactNode` | false | Content of the next button | 'Next' |
9094
| `prevButtonContent` | `string/ReactNode` | false | Content of the previous button | 'Previous' |
9195
| `showControls` | `boolean` | false | Show/hide navigation controls | true |
96+
| `slideOnClick` | `boolean` | false | Slide to the clicked slide | false |
97+
98+
## Controlling from outside
99+
100+
It is possible to control the component from outside - for example from a parent component. In order to do so, a React Ref should be used. The `current` reference contains several methods, including:
101+
102+
- `next` - Slides the carousel to the next slide.
103+
- `prev` - Slides the carousel to the previous slide.
104+
- `getItems` - Returns an array with all items passed to the carousel.
105+
- `getSelectedIndex` - Returns the active slide index of the carousel.
106+
- `setSelectedIndex` - Sets the active slide index of the carousel and slides to this slide.
107+
108+
The [demo](https://react-round-carousel.atanas.info) shows how to use these methods.
92109

93110
## Style
94111

@@ -97,13 +114,16 @@ In order to achieve the layout shown in the [demo](https://react-round-carousel.
97114
There is an already existing stylesheet which can be found in the `src` folder and can be imported:
98115

99116
- in your JS entrypoint
100-
```javascript
101-
import 'react-round-carousel/src/index.css';
102-
```
117+
118+
```javascript
119+
import 'react-round-carousel/src/index.css';
120+
```
121+
103122
- in your CSS entrypoint
104-
```css
105-
@import 'react-round-carousel/src/index.css';
106-
```
123+
124+
```css
125+
@import 'react-round-carousel/src/index.css';
126+
```
107127

108128
If you don't want to use the default stylesheet, you can create and use your own.
109129

‎demo/index.html

Lines changed: 83 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css"
1515
/>
1616

17+
<link rel="shortcut icon" type="image/x-icon" href="https://atanas.info/images/favicon/favicon.ico" />
18+
1719
<style>
1820
body {
1921
font-family: monospace;
@@ -30,7 +32,7 @@
3032
width: 100%;
3133
max-width: 50rem;
3234
flex: 0 0 100%;
33-
padding: 1rem;
35+
padding: 1rem 1rem 0;
3436
margin: auto;
3537
box-sizing: border-box;
3638
}
@@ -47,18 +49,64 @@
4749
}
4850

4951
.usage pre {
52+
max-height: 75vh;
5053
padding: 0.125rem 1rem;
5154
overflow: auto;
5255
-webkit-overflow-scrolling: touch;
5356
background: linear-gradient(to right, #f0f0f0 0%, #e0e0e0 100%);
5457
}
5558

59+
.usage ul {
60+
box-sizing: border-box;
61+
display: flex;
62+
flex-flow: row wrap;
63+
justify-content: space-between;
64+
padding: 0;
65+
margin: 0 -0.5rem;
66+
list-style: none outside none;
67+
}
68+
69+
.usage li {
70+
box-sizing: border-box;
71+
flex: 0 0 calc(100% / 3);
72+
padding: 0 0.5rem 1rem;
73+
}
74+
75+
.usage li:nth-child(3) ~ li {
76+
flex: 0 0 50%
77+
}
78+
79+
.usage button {
80+
font-size: 1rem;
81+
line-height: 1.2;
82+
color: #fff;
83+
width: 100%;
84+
display: block;
85+
height: 100%;
86+
padding: 0.5rem;
87+
border: 0;
88+
background: rgba(0, 0, 0, 0.7);
89+
border-radius: 0.25rem;
90+
box-shadow: none;
91+
appearance: none;
92+
cursor: pointer;
93+
}
94+
5695
#root {
5796
flex: 0 0 100%;
5897
padding-bottom: 3rem;
5998
overflow: hidden;
6099
}
61100

101+
#root .usage {
102+
padding: 0 1rem 1rem;
103+
margin-top: 0;
104+
}
105+
106+
#root .usage h2 {
107+
margin-top: 0;
108+
}
109+
62110
.carousel__controls {
63111
padding-top: 2rem;
64112
}
@@ -67,7 +115,29 @@
67115
display: block;
68116
padding-top: 2rem;
69117
}
118+
119+
@media (max-width: 767px) {
120+
.usage li,
121+
.usage li:nth-child(3) ~ li {
122+
flex: 0 0 100%
123+
}
124+
}
70125
</style>
126+
127+
<script>
128+
(function(d, h, m){
129+
var js, fjs = d.getElementsByTagName(h)[0];
130+
if (d.getElementById(m)){return;}
131+
js = d.createElement(h); js.id = m;
132+
js.onload = function(){
133+
window.makerWidgetComInit({
134+
position: "left",
135+
widget: "egtvfprlpcdjg1i4-8syknhxgseddkfli-j45otk13qspl7fts"
136+
})};
137+
js.src = "https://makerwidget.com/js/embed.js";
138+
fjs.parentNode.insertBefore(js, fjs)
139+
}(document, "script", "dhm"))
140+
</script>
71141
</head>
72142
<body>
73143
<div class="usage">
@@ -89,7 +159,7 @@ <h2>Use the module</h2>
89159
import * as React from 'react';
90160
import { createRoot } from 'react-dom/client';
91161

92-
import { Carousel, CarouselItem } from 'react-round-carousel';
162+
import { Carousel, CarouselItem, CarouselRef } from 'react-round-carousel';
93163

94164
// Create an array of Carousel Items
95165
const items: CarouselItem[] = Array(20)
@@ -105,7 +175,17 @@ <h2>Use the module</h2>
105175
)
106176
}));
107177

108-
const App = () => &lt;Carousel items={items} /&gt;;
178+
const App = () => {
179+
const carouselRef = React.createRef<CarouselRef>();
180+
181+
return (
182+
&lt;Carousel
183+
ref={carouselRef}
184+
items={items}
185+
slideOnClick
186+
/&gt;;
187+
)
188+
}
109189

110190
createRoot(document.getElementById('root')!).render(&lt;App /&gt;);
111191
</code></pre>

‎demo/index.tsx

Lines changed: 84 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,20 @@ import { createRoot } from 'react-dom/client';
33

44
import 'scriptex-socials';
55

6-
import { Carousel, CarouselRef } from '../dist/index';
76
import { items } from './mocks';
7+
import { Carousel, CarouselRef } from '../dist/index';
8+
9+
declare global {
10+
namespace JSX {
11+
interface IntrinsicElements {
12+
'social-links': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
13+
}
14+
}
15+
}
816

917
const App = () => {
10-
const ref = React.createRef<CarouselRef>();
18+
const carouselRef = React.createRef<CarouselRef>();
19+
const [result, setResult] = React.useState('');
1120

1221
return (
1322
<>
@@ -20,7 +29,79 @@ const App = () => {
2029
See code on Github
2130
</a>
2231

23-
<Carousel items={items} ref={ref} />
32+
<div className="usage">
33+
<h2>External controls</h2>
34+
35+
{result && (
36+
<pre>
37+
<code>{result}</code>
38+
</pre>
39+
)}
40+
41+
<ul>
42+
<li>
43+
<button
44+
onClick={() => {
45+
setResult(JSON.stringify(carouselRef.current?.getItems() || [], null, 2));
46+
}}
47+
>
48+
Get carousel items
49+
</button>
50+
</li>
51+
52+
<li>
53+
<button
54+
onClick={() => {
55+
setResult('');
56+
57+
carouselRef.current?.prev();
58+
}}
59+
>
60+
Go to previous slide
61+
</button>
62+
</li>
63+
64+
<li>
65+
<button
66+
onClick={() => {
67+
setResult('');
68+
69+
carouselRef.current?.next();
70+
}}
71+
>
72+
Go to next slide
73+
</button>
74+
</li>
75+
76+
<li>
77+
<button
78+
onClick={() => {
79+
const index = carouselRef.current?.getSelectedIndex().toString();
80+
81+
setResult(`Selected slide's index is ${index}`);
82+
}}
83+
>
84+
Get selected slide&apos;s index
85+
</button>
86+
</li>
87+
88+
<li>
89+
<button
90+
onClick={() => {
91+
const index = Math.floor(Math.random() * items.length);
92+
93+
carouselRef.current?.setSelectedIndex(index);
94+
95+
setResult(`Selected slide's index is ${index}`);
96+
}}
97+
>
98+
Set selected slide&apos;s index to a random value
99+
</button>
100+
</li>
101+
</ul>
102+
</div>
103+
104+
<Carousel ref={carouselRef} items={items} slideOnClick />
24105

25106
<social-links></social-links>
26107
</>

0 commit comments

Comments
 (0)