@splidejs/react-splide - npm Package Compare versions

Comparing version 0.5.1 to 0.5.3

dist/types/components/Splide/Splide.d.ts

@@ -49,2 +49,16 @@ import { Splide as SplideCore } from '@splidejs/splide';
     /**
+     * Moves the slider by the specified control pattern.
+     *
+     * @see Splide#go()
+     *
+     * @param control - A control pattern.
+     */
+    go(control: number | string): void;
+    /**
+     * Remounts the provided splide instance.
+     *
+     * @param splide - A splide instance to remount.
+     */
+    remount(splide: SplideCore): void;
+    /**
      * Render the track element.
@@ -51,0 +65,0 @@ *

dist/types/components/SplideSlide/SplideSlide.d.ts

 import React from 'react';
-declare type Props = {
-    className?: string;
-};
+declare type Props = Omit<JSX.IntrinsicElements['li'], 'style' | 'tabIndex' | 'role' | 'aria-label' | 'aria-current' | 'aria-controls' | 'aria-hidden'>;
 /**
@@ -6,0 +4,0 @@ * The component for each slide element.

package.json

 {
   "name": "@splidejs/react-splide",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "The React component for Splide.",
@@ -28,3 +28,3 @@ "author": "Naotoshi Fujita",
   "dependencies": {
-    "@splidejs/splide": "^3.1.5"
+    "@splidejs/splide": "^3.1.6"
   },
@@ -39,2 +39,3 @@ "devDependencies": {
     "eslint": "^7.32.0",
+    "gh-pages": "^3.2.3",
     "react": "^17.0.2",
@@ -50,4 +51,5 @@ "react-dom": "^17.0.2",
     "build:all": "npm run build:module && npm run build:types",
-    "eslint": "eslint src"
+    "eslint": "eslint src",
+    "deploy": "gh-pages -d examples/dist"
   }
 }

README.md

@@ -1,91 +0,40 @@
-<p align="center">
-    <a href="https://splidejs.com" target="_blank">
-        <img width="80" src="images/logo.svg">
-    </a>
-    <a href="https://reactjs.org/" target="_blank">
-        <img width="80" src="images/react-logo.svg">
-    </a>
-</p>
+<div align="center">
+  <a href="https://splidejs.com" target="_blank">
+      <img width="80" src="images/logo.svg">
+  </a>
+  <a href="https://reactjs.org/" target="_blank">
+      <img width="80" src="images/react-logo.svg">
+  </a>
 
-# React Splide
-**React Splide is the React component for [Splide](https://github.com/Splidejs/splide) slider/carousel.**
-* [Splide Demos](https://splidejs.com/)
+  <h1>React Splide</h1>
 
-## Notice
-- Updated to v3
-- The usage is same but documents will be revised soon
+  <p>
+    React Splide is the React component for the
+    <a href="https://github.com/Splidejs/splide">Splide</a> slider/carousel.
+  </p>
 
-## Installation
-Get the latest version by NPM:
-```bash
-$ npm install @splidejs/react-splide
-```
+  <p>
+    <a href="https://splidejs.com/integration/react-splide/">Getting Started</a>
+    <br>
+    <a href="https://splidejs.com/">Demo</a>
+    <br>
+    <a href="https://github.com/Splidejs/splide/discussions">Discussions</a>
+  </p>
+</div>
 
-## Usage
-### Components
-Import `Splide` and `SplideSlide` components:
-```javascript
-import { Splide, SplideSlide } from '@splidejs/react-splide';
+## Quick Start
+Get the latest version from NPM:
 ```
-And render them like this:
-```javascript
-<Splide>
-  <SplideSlide>
-    <img src="image1.jpg" alt="Image 1"/>
-  </SplideSlide>
-  <SplideSlide>
-    <img src="image2.jpg" alt="Image 2"/>
-  </SplideSlide>
-</Splide>
+$ npm install @splidejs/react-splide
 ```
 
-### CSS
-Import [styles](https://splidejs.com/guides/themes/) if you need.
-```javascript
-import '@splidejs/splide/dist/css/themes/splide-default.min.css';
-// or
-import '@splidejs/splide/dist/css/themes/splide-sea-green.min.css';
-// or
-import '@splidejs/splide/dist/css/themes/splide-skyblue.min.css';
-```
+Import CSS and components:
 
-## Options
-The `Splide` component accepts [options](https://splidejs.com/guides/options/) as an object:
-```javascript
-<Splide
-  options={ {
-    rewind : true,
-    width  : 800,
-    gap    : '1rem',
-  } }
->
-</Splide>
-```
-
-
-## Listening to Events
-You can listen to all [Splide events](https://splidejs.com/guides/events/) through the `Splide` component. The callback function name is generated by the original event name, adding an "on" prefix, converted to the camelcase without colons. For example, "arrows:mounted" will be "onArrowsMounted".
-
-```javascript
-<Splide onArrowsMounted={ ( splide, prev, next ) => { console.log( prev, next ) } }>
-```
-Note that the first argument is the splide instance, meaning original arguments are shifted by one.
-
-
-## Examples
-Here is a small example:
-
-```javascript
-import React from 'react';
+```jsx
 import { Splide, SplideSlide } from '@splidejs/react-splide';
+import '@splidejs/splide/dist/css/themes/splide-default.min.css';
 
-export default () => {
+export function Slider() {
   return (
-    <Splide
-      options={ {
-        rewind : true,
-        width  : 800,
-        gap    : '1rem',
-      } }
-    >
+    <Splide options={ { rewind: true } }>
       <SplideSlide>
@@ -97,5 +46,2 @@ <img src="image1.jpg" alt="Image 1"/>
       </SplideSlide>
-      <SplideSlide>
-        <img src="image3.jpg" alt="Image 3"/>
-      </SplideSlide>
     </Splide>
@@ -106,4 +52,7 @@ );
 
+Visit [here](https://splidejs.com/integration/react-splide/) for more details.
+
+
 ## License
 React Splide and Splide are released under the MIT license.
 © 2021 Naotoshi Fujita

src/js/types/events.ts

@@ -0,0 +0,0 @@ import { EventMap, Splide } from '@splidejs/splide';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

175467

increased by1.18%

Number of package files

54

increased by3.85%

Lines of code

5661

increased by0.78%

Worsened metrics

Dev dependency count

12

increased by9.09%

Number of lines in readme file

57

decreased by-47.22%

Dependency changes

• Updated@splidejs/splide@^3.1.6