@tiagotrindade/solid-colorful - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

package.json

 {
   "name": "@tiagotrindade/solid-colorful",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "🎨 A tiny (2,8 KB) color picker component for SolidJS apps. Fast, well-tested, dependency-free, mobile-friendly and accessible",
@@ -15,3 +15,3 @@ "source": "src/index.ts",
       "umd": "./dist/index.umd.js",
-      "import": "./dist/index.mjs",
+      "import": "./dist/index.module.js",
       "require": "./dist/index.js",
@@ -18,0 +18,0 @@ "default": "./dist/index.module.js"

README.md

@@ -8,24 +8,18 @@ <div align="center">
 <div align="center">
-  <a href="https://npmjs.org/package/solid-colorful">
-    <img alt="npm" src="https://img.shields.io/npm/v/solid-colorful.svg?labelColor=da248d&color=6ead0a" />
+  <a href="https://npmjs.org/package/@tiagotrindade/solid-colorful">
+    <img alt="npm" src="https://img.shields.io/npm/v/@tiagotrindade/solid-colorful.svg?labelColor=da248d&color=6ead0a" />
   </a>
   <a href="https://github.com/TiagoCavalcante/solid-colorful/actions">
-    <img alt="build" src="https://img.shields.io/github/workflow/status/TiagoCavalcante/solid-colorful/Node.js%20CI/master.svg?labelColor=da248d&color=6ead0a" />
+    <img alt="minziped-size" src="https://badgen.net/bundlephobia/minzip/@tiagotrindade/solid-colorful?labelColor=da248d&color=6ead0a" />
   </a>
-  <a href="https://codecov.io/gh/TiagoCavalcante/solid-colorful">
-    <img alt="coverage" src="https://img.shields.io/codecov/c/github/TiagoCavalcante/solid-colorful.svg?labelColor=da248d&color=6ead0a" />
+  <a href="https://bundlephobia.com/result?p=@tiagotrindade/solid-colorful">
+    <img alt="tree-shakeable" src="https://badgen.net/bundlephobia/tree-shaking/@tiagotrindade/solid-colorful?labelColor=da248d&color=6ead0a" />
   </a>
-  <a href="https://npmjs.org/package/solid-colorful">
-    <img alt="no dependencies" src="https://badgen.net/bundlephobia/dependency-count/solid-colorful?labelColor=da248d&color=6ead0a" />
+  <a href="https://npmjs.org/package/@tiagotrindade/solid-colorful">
+    <img alt="types included" src="https://badgen.net/npm/types/@tiagotrindade/solid-colorful?labelColor=da248d&color=6ead0a" />
   </a>
-  <a href="https://bundlephobia.com/result?p=solid-colorful">
-    <img alt="tree-shakeable" src="https://badgen.net/bundlephobia/tree-shaking/solid-colorful?labelColor=da248d&color=6ead0a" />
-  </a>
-  <a href="https://npmjs.org/package/solid-colorful">
-    <img alt="types included" src="https://badgen.net/npm/types/solid-colorful?labelColor=da248d&color=6ead0a" />
-  </a>
 </div>
 
 <div align="center">
-  <strong>solid-colorful</strong> is a tiny color picker component for SolidJS apps. (forked from [react-colorful](https://github.com/omgovich/react-colorful))
+  <strong>solid-colorful</strong> is a tiny color picker component for SolidJS apps. (forked from <a href="https://github.com/omgovich/react-colorful">react-colorful</a>)
 </div>
@@ -35,6 +29,6 @@
 
-- 🗜 **Small**: Just 2,8 KB gzipped ([13x lighter](#why-solid-colorful) than **react-color**).
+- 🗜 **Small**: Just 3.9 KB gzipped ([10x lighter](#why-solid-colorful) than **react-color**).
 - 🌳 **Tree-shakeable**: Only the parts you use will be imported into your app's bundle.
 - 🚀 **Fast**: Built with hooks and functional components only.
-- 🛡 **Bulletproof**: Written in strict TypeScript and has 100% test coverage.
+- 🛡 **Bulletproof**: Written in strict TypeScript.
 - 🗂 **Typed**: Ships with [types included](#typescript-support)
@@ -49,3 +43,3 @@ - 😍 **Simple**: The interface is straightforward and easy to use.
 
-- [Website](https://omgovich.github.io/solid-colorful)
+- [Website](https://TiagoCavalcante.github.io/solid-colorful)
 - [HEX Color Picker (CodeSandbox)](https://codesandbox.io/s/solid-colorful-demo-u5vwp)
@@ -72,7 +66,7 @@ - [RGBA Color Picker (CodeSandbox)](https://codesandbox.io/s/solid-colorful-rgb-o9q0t)
 ```js
-import { HexColorPicker } from "solid-colorful"
+import { HexColorPicker } from "@tiagotrindade/solid-colorful"
 
 const YourComponent = () => {
-  const [color, setColor] = useState("#aabbcc")
-  return <HexColorPicker color={color} onChange={setColor} />
+  const [color, setColor] = createSignal("#aabbcc")
+  return <HexColorPicker color={color()} onChange={setColor} />
 }
@@ -109,3 +103,3 @@ ```
 ```js
-import { RgbColorPicker } from "solid-colorful"
+import { RgbColorPicker } from "@tiagotrindade/solid-colorful"
 
@@ -154,10 +148,10 @@ const YourComponent = () => {
 ```js
-import { HexColorPicker, HexColorInput } from "solid-colorful"
+import { HexColorPicker, HexColorInput } from "@tiagotrindade/solid-colorful"
 
 const YourComponent = () => {
-  const [color, setColor] = useState("#aabbcc")
+  const [color, setColor] = createSignal("#aabbcc")
   return (
     <div>
-      <HexColorPicker color={color} onChange={setColor} />
-      <HexColorInput color={color} onChange={setColor} />
+      <HexColorPicker color={color()} onChange={setColor} />
+      <HexColorInput color={color()} onChange={setColor} />
     </div>
@@ -202,3 +196,3 @@ )
 ```ts
-import { HslColorPicker, HslColor } from "solid-colorful";
+import { HslColorPicker, HslColor } from "@tiagotrindade/solid-colorful";
 
@@ -232,5 +226,5 @@ const myHslValue: HslColor = { h: 0, s: 0, l: 0 };
 | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
-| **solid-colorful** | [![](https://badgen.net/bundlephobia/min/solid-colorful?color=6ead0a&label=)](https://bundlephobia.com/result?p=solid-colorful)    | [![](https://badgen.net/bundlephobia/minzip/solid-colorful?color=6ead0a&label=)](https://bundlephobia.com/result?p=solid-colorful)    | [![](https://badgen.net/bundlephobia/dependency-count/solid-colorful?color=6ead0a&label=)](https://bundlephobia.com/result?p=solid-colorful)    |
-| solid-color        | [![](https://badgen.net/bundlephobia/min/solid-color?color=red&label=)](https://bundlephobia.com/result?p=solid-color)             | [![](https://badgen.net/bundlephobia/minzip/solid-color?color=red&label=)](https://bundlephobia.com/result?p=solid-color)             | [![](https://badgen.net/bundlephobia/dependency-count/solid-color?color=red&label=)](https://bundlephobia.com/result?p=solid-color)             |
-| solid-input-color  | [![](https://badgen.net/bundlephobia/min/solid-input-color?color=red&label=)](https://bundlephobia.com/result?p=solid-input-color) | [![](https://badgen.net/bundlephobia/minzip/solid-input-color?color=red&label=)](https://bundlephobia.com/result?p=solid-input-color) | [![](https://badgen.net/bundlephobia/dependency-count/solid-input-color?color=red&label=)](https://bundlephobia.com/result?p=solid-input-color) |
+| **solid-colorful** | [![](https://badgen.net/bundlephobia/min/@tiagotrindade/solid-colorful?color=6ead0a&label=)](https://bundlephobia.com/result?p=@tiagotrindade/solid-colorful)    | [![](https://badgen.net/bundlephobia/minzip/@tiagotrindade/solid-colorful?color=6ead0a&label=)](https://bundlephobia.com/result?p=@tiagotrindade/solid-colorful)    | [![](https://badgen.net/bundlephobia/dependency-count/@tiagotrindade/solid-colorful?color=6ead0a&label=)](https://bundlephobia.com/result?p=@tiagotrindade/solid-colorful)    |
+| react-color        | [![](https://badgen.net/bundlephobia/min/react-color?color=red&label=)](https://bundlephobia.com/result?p=solid-color)             | [![](https://badgen.net/bundlephobia/minzip/react-color?color=red&label=)](https://bundlephobia.com/result?p=solid-color)             | [![](https://badgen.net/bundlephobia/dependency-count/react-color?color=red&label=)](https://bundlephobia.com/result?p=solid-color)             |
+| react-input-color  | [![](https://badgen.net/bundlephobia/min/react-input-color?color=red&label=)](https://bundlephobia.com/result?p=react-input-color) | [![](https://badgen.net/bundlephobia/minzip/react-input-color?color=red&label=)](https://bundlephobia.com/result?p=react-input-color) | [![](https://badgen.net/bundlephobia/dependency-count/react-input-color?color=red&label=)](https://bundlephobia.com/result?p=react-input-color) |
 | rc-color-picker    | [![](https://badgen.net/bundlephobia/min/rc-color-picker?color=red&label=)](https://bundlephobia.com/result?p=rc-color-picker)     | [![](https://badgen.net/bundlephobia/minzip/rc-color-picker?color=red&label=)](https://bundlephobia.com/result?p=rc-color-picker)     | [![](https://badgen.net/bundlephobia/dependency-count/rc-color-picker?color=red&label=)](https://bundlephobia.com/result?p=rc-color-picker)     |

No alert changes

Worsened metrics

Total package byte prevSize

284690

decreased by-0.06%

Number of lines in readme file

223

decreased by-2.62%

No dependency changes