react-image-colors - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

package.json

 {
   "name": "react-image-colors",
   "private": false,
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
@@ -6,0 +6,0 @@ "main": "./dist/index.js",

README.md

@@ -1,30 +0,144 @@
-# React + TypeScript + Vite
+# react-image-colors
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+`react-image-colors` is a React hook library for extracting the dominant colors from an image and creating a gradient background based on those colors. It also includes utilities for distinguishing between white and black colors.
 
-Currently, two official plugins are available:
+## Installation
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+To install `react-image-colors`, run:
 
-## Expanding the ESLint configuration
+```bash
+npm install react-image-colors
+Usage
+Hook: useImageColors
+The useImageColors hook is used to extract the dominant colors from an image and create a gradient background based on those colors.
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+Parameters
+image (string | undefined): The URL of the image from which to extract colors.
+options (object): Optional configuration.
+crossOrigin (string): The cross-origin setting for the image. Default is "anonymous".
+Returns
+bgColor (string): The generated gradient background based on the dominant color.
+imgRef (React.RefObject<HTMLImageElement>): A reference to the image element.
+canvasRef (React.RefObject<HTMLCanvasElement>): A reference to the canvas element.
+Example
+jsx
+Copy code
+import React from 'react';
+import useImageColors from 'react-image-colors';
 
-- Configure the top-level `parserOptions` property like this:
+const MyComponent = () => {
+  const image = 'https://example.com/image.jpg';
+  const { bgColor, imgRef, canvasRef } = useImageColors(image);
 
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
+  return (
+    <div style={{ background: bgColor }}>
+      <img ref={imgRef} src={image} alt="Example" />
+    </div>
+  );
+};
+
+export default MyComponent;
+Function: calculateDominantColor
+This function calculates the most dominant color in an image.
+
+Parameters
+ctx (CanvasRenderingContext2D): The 2D rendering context for a <canvas> element.
+width (number): The width of the image.
+height (number): The height of the image.
+Returns
+string: The dominant color in rgb(r,g,b) format.
+Function: createBubbles
+This function creates a gradient background based on the dominant color.
+
+Parameters
+baseColor (string): The base color for the gradient.
+Returns
+string: A CSS gradient string.
+Function: isWhitish
+This function checks if a color is whitish based on its RGB values.
+
+Parameters
+r (number): Red component of the color.
+g (number): Green component of the color.
+b (number): Blue component of the color.
+Returns
+boolean: true if the color is whitish, false otherwise.
+Function: isBlackish
+This function checks if a color is blackish based on its RGB values.
+
+Parameters
+r (number): Red component of the color.
+g (number): Green component of the color.
+b (number): Blue component of the color.
+Returns
+boolean: true if the color is blackish, false otherwise.
+Example
+Here is an example of using the useImageColors hook in a React component:
+
+jsx
+Copy code
+import React from 'react';
+import useImageColors from 'react-image-colors';
+
+const ImageColorComponent = () => {
+  const image = 'https://example.com/image.jpg';
+  const { bgColor, imgRef } = useImageColors(image);
+
+  return (
+    <div style={{ background: bgColor, padding: '20px', borderRadius: '8px' }}>
+      <img ref={imgRef} src={image} alt="Example" style={{ width: '100%' }} />
+    </div>
+  );
+};
+
+export default ImageColorComponent;
+Utilities
+Function: hexToRgb
+Converts a hex color code to RGB.
+
+Parameters
+hex (string): The hex color code.
+Returns
+[number, number, number]: The RGB representation of the color.
+Example
+javascript
+Copy code
+import { hexToRgb } from 'react-image-colors';
+
+const rgbColor = hexToRgb('#ff5733');
+console.log(rgbColor); // Output: [255, 87, 51]
+Function: rgbToHsl
+Converts RGB color values to HSL.
+
+Parameters
+r (number): Red component of the color.
+g (number): Green component of the color.
+b (number): Blue component of the color.
+Returns
+[number, number, number]: The HSL representation of the color.
+Example
+javascript
+Copy code
+import { rgbToHsl } from 'react-image-colors';
+
+const hslColor = rgbToHsl(255, 87, 51);
+console.log(hslColor); // Output: [0.033, 1, 0.6]
+Function: hslToRgb
+Converts HSL color values to RGB.
+
+Parameters
+h (number): Hue component of the color.
+s (number): Saturation component of the color.
+l (number): Lightness component of the color.
+Returns
+[number, number, number]: The RGB representation of the color.
+Example
+javascript
+Copy code
+import { hslToRgb } from 'react-image-colors';
+
+const rgbColor = hslToRgb(0.033, 1, 0.6);
+console.log(rgbColor); // Output: [255, 87, 51]
+License
+This project is licensed under the MIT License.
 ```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

No alert changes

Improved metrics

Total package byte prevSize

15858

increased by23.15%

Number of lines in readme file

145

increased by367.74%

No dependency changes