framer-motion-ticker - npm Package Compare versions

Comparing version 0.0.0 to 1.0.1

package.json

 {
   "name": "framer-motion-ticker",
-  "version": "0.0.0",
+  "version": "1.0.1",
   "description": "A React component that acts like a ticker, or marquee.",
@@ -25,3 +25,4 @@ "author": "[e-mail]",
   "dependencies": {
-    "framer-motion": "^10.9.1"
+    "framer-motion": "^10.9.1",
+    "uuid": "^9.0.0"
   },
@@ -37,2 +38,3 @@ "devDependencies": {
     "@types/react-dom": "^18.0.11",
+    "@types/uuid": "^9.0.1",
     "@typescript-eslint/eslint-plugin": "^5.56.0",
@@ -39,0 +41,0 @@ "@typescript-eslint/parser": "^5.56.0",

README.md

@@ -1,1 +0,81 @@
-# Framer Motion Ticker
+# Framer Motion Ticker
+
+A simple ticker made with `framer-motion`. Infinitely and seamlessly scroll through elements.
+
+## Basic Usage
+
+```jsx
+import * as React from "react";
+import Carousel from "framer-motion-carousel";
+
+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;
+```
+
+## images carousel
+
+`img` element should add `draggable=false`
+
+```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>
+```
+
+## Example
+
+[Live Demo](https://carousel-app-772051431.vercel.app)
+
+[example repo](https://github.com/jiangbo2015/framer-motion-carousel/tree/main/example)
+
+![example](https://cdn.jsdelivr.net/gh/jiangbo2015/framer-motion-carousel/img.jpg)
+
+
+## props
+
+| 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   |
+
+
+
+## example
+
+```
+cd example && yarn install
+
+yarn dev
+```

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

44009

15.25%

Number of low quality alerts

0

-100%

Number of lines in readme file

81

8000%

Worsened metrics

Dependency count

2

100%

Dev dependency count

20

5.26%

Number of package files

15

-6.25%

Lines of code

122

-43.78%

Dependency changes

• + Added

  uuid@^9.0.0

• + Added

  uuid@9.0.1
  (transitive)