use-carousel-hook - npm Package Compare versions

Comparing version 0.1.0 to 0.2.1

package.json

		{
		"name": "use-carousel-hook",
		"version": "0.1.0",
		"version": "0.2.1",
		"description": "Adds functionality for carousels using React hooks",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

		@@ -5,2 +5,3 @@ # useCarousel
		[![npm version](https://img.shields.io/npm/v/use-carousel-hook.svg)](https://www.npmjs.com/package/use-carousel-hook)
		[![Test coverage](https://gitlab.com/devallama/use-carousel-hook/badges/main/coverage.svg)](https://gitlab.com/devallama/use-carousel-hook/badges/main/coverage.svg)

		@@ -13,2 +14,8 @@ useCarousel is a React hook for adding functions to create a sliding carousel.

		## Demo

		Take a look at the demo on CodeSandbox which includes styles to demonstate how to use the hook.

		[https://codesandbox.io/s/use-carousel-hook-demo-3ledpu?file=/src/Carousel.tsx](https://codesandbox.io/s/use-carousel-hook-demo-3ledpu?file=/src/Carousel.tsx)

		## How to use
		@@ -36,3 +43,3 @@
		const Carousel: React.FC = () => {
		const { ref, previous, next, setCurrent, reset } = useCarousel();
		const { ref, previous, next, setCurrent, reset } = useCarousel<HTMLUListElement>();

		@@ -47,4 +54,3 @@ return (
		<button onClick={() => setCurrent(2)}>Set index to 2</button>
		/* ref will need to be cast to the correct type if using TypeScript */
		<ul ref={ref as React.RefObject<HTMLUListElement>}>
		<ul ref={ref}>
		<li>Item 1</li>
		@@ -55,14 +61,2 @@ <li>Item 2</li>
		</ul>
		<div ref={ref as React.RefObject<HTMLDivElement>}>
		<div>Item 1</div>
		<div>Item 2</div>
		<div>Item 3</div>
		<div>Item 4</div>
		</div>
		<span ref={ref as React.RefObject<HTMLSpanElement>}>
		<div>Item 1</div>
		<div>Item 2</div>
		<div>Item 3</div>
		<div>Item 4</div>
		</span>
		</div>
		@@ -88,4 +82,4 @@ );

		### Commonjs
		### ESNext

		A commonjs build of the package can be imported using `use-carousel-hook/cjs`.
		A ESNext build of the package can be imported using `use-carousel-hook/esnext`.

use-carousel-hook - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics