Update the demo

scriptex · May 19, 2023 · 16ab61e · 16ab61e · vercel · May 19, 2023
1 parent cccfb2f
commit 16ab61e
Show file tree

Hide file tree

Showing 6 changed files with 1,024 additions and 885 deletions.
diff --git a/README.md b/README.md
@@ -56,7 +56,7 @@ The slides (or items) should have the following shape:
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { Carousel, CarouselItem } from 'react-round-carousel';
+import { Carousel, CarouselRef, CarouselItem } from 'react-round-carousel';
 
 // Create an array of Carousel Items
 const items: CarouselItem[] = Array(20)
@@ -72,7 +72,11 @@ const items: CarouselItem[] = Array(20)
 		)
 	}));
 
-const App = () => <Carousel items={items} />;
+const App = () => {
+	const carouselRef = React.createRef<CarouselRef>();
+
+	return <Carousel ref={carouselRef} items={items} slideOnClick />;
+};
 
 createRoot(document.getElementById('root')!).render(<App />);
 ```
@@ -89,6 +93,19 @@ The component accepts the following configuration options as props:
 | `nextButtonContent` | `string/ReactNode` | false    | Content of the next button                      | 'Next'     |
 | `prevButtonContent` | `string/ReactNode` | false    | Content of the previous button                  | 'Previous' |
 | `showControls`      | `boolean`          | false    | Show/hide navigation controls                   | true       |
+| `slideOnClick`      | `boolean`          | false    | Slide to the clicked slide                      | false      |
+
+## Controlling from outside
+
+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:
+
+-   `next` - Slides the carousel to the next slide.
+-   `prev` - Slides the carousel to the previous slide.
+-   `getItems` - Returns an array with all items passed to the carousel.
+-   `getSelectedIndex` - Returns the active slide index of the carousel.
+-   `setSelectedIndex` - Sets the active slide index of the carousel and slides to this slide.
+
+The [demo](https://react-round-carousel.atanas.info) shows how to use these methods.
 
 ## Style
 
@@ -97,13 +114,16 @@ In order to achieve the layout shown in the [demo](https://react-round-carousel.
 There is an already existing stylesheet which can be found in the `src` folder and can be imported:
 
 -   in your JS entrypoint
-    ```javascript
-    import 'react-round-carousel/src/index.css';
-    ```
+
+```javascript
+import 'react-round-carousel/src/index.css';
+```
+
 -   in your CSS entrypoint
-    ```css
-    @import 'react-round-carousel/src/index.css';
-    ```
+
+```css
+@import 'react-round-carousel/src/index.css';
+```
 
 If you don't want to use the default stylesheet, you can create and use your own.
 

diff --git a/demo/index.html b/demo/index.html
@@ -14,6 +14,8 @@
 			href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css"
 		/>
 
+		<link rel="shortcut icon" type="image/x-icon" href="https://atanas.info/images/favicon/favicon.ico" />
+
 		<style>
 			body {
 				font-family: monospace;
@@ -30,7 +32,7 @@
 				width: 100%;
 				max-width: 50rem;
 				flex: 0 0 100%;
-				padding: 1rem;
+				padding: 1rem 1rem 0;
 				margin: auto;
 				box-sizing: border-box;
 			}
@@ -47,18 +49,64 @@
 			}
 
 			.usage pre {
+				max-height: 75vh;
 				padding: 0.125rem 1rem;
 				overflow: auto;
 				-webkit-overflow-scrolling: touch;
 				background: linear-gradient(to right, #f0f0f0 0%, #e0e0e0 100%);
 			}
 
+			.usage ul {
+				box-sizing: border-box;
+				display: flex;
+				flex-flow: row wrap;
+				justify-content: space-between;
+				padding: 0;
+				margin: 0 -0.5rem;
+				list-style: none outside none;
+			}
+
+			.usage li {
+				box-sizing: border-box;
+				flex: 0 0 calc(100% / 3);
+				padding: 0 0.5rem 1rem;
+			}
+
+			.usage li:nth-child(3) ~ li {
+				flex: 0 0 50%
+			}
+
+			.usage button {
+				font-size: 1rem;
+				line-height: 1.2;
+				color: #fff;
+				width: 100%;
+				display: block;
+				height: 100%;
+				padding: 0.5rem;
+				border: 0;
+				background: rgba(0, 0, 0, 0.7);
+				border-radius: 0.25rem;
+				box-shadow: none;
+				appearance: none;
+				cursor: pointer;
+			}
+
 			#root {
 				flex: 0 0 100%;
 				padding-bottom: 3rem;
 				overflow: hidden;
 			}
 
+			#root .usage {
+				padding: 0 1rem 1rem;
+				margin-top: 0;
+			}
+
+			#root .usage h2 {
+				margin-top: 0;
+			}
+
 			.carousel__controls {
 				padding-top: 2rem;
 			}
@@ -67,7 +115,29 @@
 				display: block;
 				padding-top: 2rem;
 			}
+
+			@media (max-width: 767px) {
+				.usage li,
+				.usage li:nth-child(3) ~ li {
+					flex: 0 0 100%
+				}
+			}
 		</style>
+
+		<script>
+			(function(d, h, m){
+				var js, fjs = d.getElementsByTagName(h)[0];
+				if (d.getElementById(m)){return;}
+				js = d.createElement(h); js.id = m;
+				js.onload = function(){
+					window.makerWidgetComInit({
+					position: "left",
+					widget: "egtvfprlpcdjg1i4-8syknhxgseddkfli-j45otk13qspl7fts"
+				})};
+				js.src = "https://makerwidget.com/js/embed.js";
+				fjs.parentNode.insertBefore(js, fjs)
+			}(document, "script", "dhm"))
+		</script>
 	</head>
 	<body>
 		<div class="usage">
@@ -89,7 +159,7 @@ <h2>Use the module</h2>
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { Carousel, CarouselItem } from 'react-round-carousel';
+import { Carousel, CarouselItem, CarouselRef } from 'react-round-carousel';
 
 // Create an array of Carousel Items
 const items: CarouselItem[] = Array(20)
@@ -105,7 +175,17 @@ <h2>Use the module</h2>
     )
   }));
 
-const App = () => &lt;Carousel items={items} /&gt;;
+const App = () => {
+	const carouselRef = React.createRef<CarouselRef>();
+
+	return (
+		&lt;Carousel
+			ref={carouselRef}
+			items={items}
+			slideOnClick
+		/&gt;;
+	)
+}
 
 createRoot(document.getElementById('root')!).render(&lt;App /&gt;);
         </code></pre>

diff --git a/demo/index.tsx b/demo/index.tsx
@@ -3,11 +3,20 @@ import { createRoot } from 'react-dom/client';
 
 import 'scriptex-socials';
 
-import { Carousel, CarouselRef } from '../dist/index';
 import { items } from './mocks';
+import { Carousel, CarouselRef } from '../dist/index';
+
+declare global {
+	namespace JSX {
+		interface IntrinsicElements {
+			'social-links': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+		}
+	}
+}
 
 const App = () => {
-	const ref = React.createRef<CarouselRef>();
+	const carouselRef = React.createRef<CarouselRef>();
+	const [result, setResult] = React.useState('');
 
 	return (
 		<>
@@ -20,7 +29,79 @@ const App = () => {
 				See code on Github
 			</a>
 
-			<Carousel items={items} ref={ref} />
+			<div className="usage">
+				<h2>External controls</h2>
+
+				{result && (
+					<pre>
+						<code>{result}</code>
+					</pre>
+				)}
+
+				<ul>
+					<li>
+						<button
+							onClick={() => {
+								setResult(JSON.stringify(carouselRef.current?.getItems() || [], null, 2));
+							}}
+						>
+							Get carousel items
+						</button>
+					</li>
+
+					<li>
+						<button
+							onClick={() => {
+								setResult('');
+
+								carouselRef.current?.prev();
+							}}
+						>
+							Go to previous slide
+						</button>
+					</li>
+
+					<li>
+						<button
+							onClick={() => {
+								setResult('');
+
+								carouselRef.current?.next();
+							}}
+						>
+							Go to next slide
+						</button>
+					</li>
+
+					<li>
+						<button
+							onClick={() => {
+								const index = carouselRef.current?.getSelectedIndex().toString();
+
+								setResult(`Selected slide's index is ${index}`);
+							}}
+						>
+							Get selected slide&apos;s index
+						</button>
+					</li>
+
+					<li>
+						<button
+							onClick={() => {
+								const index = Math.floor(Math.random() * items.length);
+
+								carouselRef.current?.setSelectedIndex(index);
+
+								setResult(`Selected slide's index is ${index}`);
+							}}
+						>
+							Set selected slide&apos;s index to a random value
+						</button>
+					</li>
+				</ul>
+			</div>
+
+			<Carousel ref={carouselRef} items={items} slideOnClick />
 
 			<social-links></social-links>
 		</>