framer-motion-ticker - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

index.ts

@@ -1,1 +0,1 @@
-export * from './src';
+export * from './src';

package.json

 {
   "name": "framer-motion-ticker",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A React component that acts like a ticker, or marquee.",
@@ -5,0 +5,0 @@ "author": "[e-mail]",

README.md

@@ -5,78 +5,66 @@ # Framer Motion Ticker
 
-## Basic Usage
+[![NPM Version][npm-version-image]][npm-url]
+[![NPM Install Size][npm-install-size-image]][npm-install-size-url]
+[![NPM Downloads][npm-downloads-image]][npm-downloads-url]
 
-```jsx
-import * as React from "react";
-import Carousel from "framer-motion-carousel";
+# Installation
 
-const colors = ["#f90", "#ef0", "#e0f"];
-
-
-const App = () => (
-  <div style={{ width: 600, height: 400 }}>
-    <Carousel>
-      {colors.map((item, i) => (
-        <div
-          key={i}
-          style={{
-            width: "100%",
-            height: "100%",
-            backgroundColor: colors[i],
-          }}
-        ></div>
-      ))}
-    </Carousel>
-  </div>
-);
-export default App;
 ```
+npm install framer-motion-ticker
+```
 
-## images carousel
+## Basic Usage
 
-`img` element should add `draggable=false`
+```jsx
+import React from 'react';
+import Ticker from 'framer-motion-ticker';
 
-```jsx
-<div style={{ width: 600, height: 400, margin: "0 auto" }}>
-  <Carousel>
-    {[1, 2, 3, 4].map((item, i) => (
-      <img
-        draggable="false"
-        src={`./${item}.jpg`}
-        key={i}
-        width="100%"
-        alt=""
-      />
-    ))}
-  </Carousel>
-</div>
+function App() {
+  const colors = ['#632bf3', '#f122c8', '#f16022', '#9ef344', '#44d3f3'];
+  return (
+    <div className="App">
+      <Ticker duration={20}>
+        {colors.map((item, index) => (
+          <div
+            key={index}
+            style={{
+              backgroundColor: item,
+              margin: '5px',
+              height: '250px',
+              width: '200px',
+            }}
+          />
+        ))}
+      </Ticker>
+    </div>
+  );
+}
+export default App;
 ```
 
-## Example
+## Examples
 
-[Live Demo](https://carousel-app-772051431.vercel.app)
+[Live Demo](https://framer-motion-ticker-example.netlify.app/)
 
-[example repo](https://github.com/jiangbo2015/framer-motion-carousel/tree/main/example)
+[example repo](https://github.com/andremov/framer-motion-ticker/tree/main/example)
 
-![example](https://cdn.jsdelivr.net/gh/jiangbo2015/framer-motion-carousel/img.jpg)
+## Ticker props
 
+| props    | type   | default | description             |
+| -------- | ------ | ------- | ----------------------- |
+| duration | number | 10      | duration of one segment |
 
-## props
+## Using the Ticker example folder
 
-| props            | type                                                                                 | default | description                                        |
-|------------------|--------------------------------------------------------------------------------------|---------|----------------------------------------------------|
-| loop             | boolean                                                                              | true    | loop play                                          |
-| autoPlay         | boolean                                                                              | true    | auto play                                          |
-| interval         | number                                                                               | 2000    | auto play interval                                 |
-| renderArrowLeft  | ({handlePrev: () => void, activeIndex: number}) => React.ReactNode                   | null    | custom your arrows, `activeIndex` is current index |
-| renderArrowRight | ({handleNext: () => void, activeIndex: number}) => React.ReactNode                   | null    | custom your arrows, `activeIndex` is current index |
-| renderDots       | ({activeIndex: number, setActiveIndex: (index: number) => void;}) => React.ReactNode | null    | custom your dots, `activeIndex` is current index   |
+```
+cd example && npm install
 
-
-
-## example
-
+npm run dev
 ```
-cd example && yarn install
 
-yarn dev
-```
+[npm-downloads-image]: https://badgen.net/npm/dm/framer-motion-ticker
+[npm-downloads-url]: https://npmcharts.com/compare/framer-motion-ticker?minimal=true
+[npm-install-size-image]: https://badgen.net/packagephobia/install/framer-motion-ticker
+[npm-install-size-url]: https://packagephobia.com/result?p=framer-motion-ticker
+[npm-url]: https://npmjs.org/package/framer-motion-ticker
+[npm-version-image]: https://badgen.net/npm/v/framer-motion-ticker

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47636

increased by8.24%

Number of package files

19

increased by26.67%

Lines of code

235

increased by92.62%

Worsened metrics

Number of lines in readme file

70

decreased by-13.58%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes