@lichin/pico - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

package.json

 {
     "name": "@lichin/pico",
-    "version": "0.1.3",
+    "version": "0.1.4",
     "description": "Animation helper",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

 [![npm(scoped)](https://img.shields.io/npm/v/@lichin/pico.svg)](https://github.com/lichin-lin/pico)
 [![npm bundle size](https://img.shields.io/bundlephobia/min/@lichin/pico.svg)](https://github.com/lichin-lin/pico)
 
-Animation helper ⭐️
----
-githubbox.com
+<h3 align="center">
+  An experimental animation<br>library for React on the web.
+</h3>
+<br>
+
+## Get started
+
+### Quick start
+
+```
+npm install @lichin/pico
+```
+
+```jsx
+import React from "react";
+import { animate } from "@lichin/pico";
+
+export default function App() {
+  const handleRotate = () => {
+    const elm = document.querySelector(".image");
+    animate(elm, {
+      rotate: 90,
+      transition: {
+        duration: 0.4
+      }
+    });
+  };
+
+  return (
+    <div className="App">
+      <img
+        onClick={handleRotate}
+        src="https://miro.medium.com/max/1400/1*UktO9Cqfa_M7gv3syxCjRg.jpeg"
+        alt="doggy"
+        className="image"
+      />
+    </div>
+  );
+}
+```
+### Demo
+you can play with it through [codesandbox example](https://codesandbox.io/s/pico-sspzc?file=/src/App.js)
+### Docs
+**Animate API**
+<br />
+Animate function contain two parameter:
+<br />
+| Prop | Type | Default | Description |
+| ------------- | ------------- | ------------- | ------------- |
+| element | HTMLElement Object | -             | Single HTMLElement Object |
+| options | Object       | {}             | Please see next object description for the details |
+
+options object contain two type of keys:
+| Key | Type | Default | Description |
+| ------------- | ------------- | ------------- | ------------- |
+| transition | Object | -             | Describe how the animation should play, currently support `duration: Number` |
+| rotate | Number       | -             | The value that the element should rotate |
+
+## License
+
+Pico is MIT licensed.

src/animate.js

@@ -15,3 +15,2 @@ import {
   const { transition, ...properties } = options;
-  // handle transition
   elm.style.transition = `transform ${(transition && transition.duration) ||
@@ -18,0 +17,0 @@ 0}s`;

src/utils/getAngle.js

@@ -23,4 +23,8 @@ /**
   let b = values[1];
-  let angle = Math.round(Math.atan2(b, a) * (180 / Math.PI)) || 0;
+  let radians = Math.atan2(b, a);
+  if (radians < 0) {
+    radians += 2 * Math.PI;
+  }
+  let angle = Math.round(radians * (180 / Math.PI)) || 0;
   return angle;
 };

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

4720

increased by49.08%

Lines of code

57

increased by5.56%

Number of lines in readme file

64

increased by966.67%

No dependency changes