Skip to content

Commit

Permalink
feat: remove useColor hook
Browse files Browse the repository at this point in the history
remove useColor hook due to no usage in component

BREAKING CHANGE: remove useColor hook due to no usage in component
  • Loading branch information
jeslage committed Aug 13, 2023
1 parent 533d096 commit cf09507
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 47 deletions.
35 changes: 12 additions & 23 deletions README.md
Expand Up @@ -16,15 +16,13 @@ yarn add react-pick-color
## Usage

```js
import React, { useState } from "react";
import ColorPicker from "react-pick-color";
import React, { useState } from 'react';
import ColorPicker from 'react-pick-color';

const App = () => {
const [color, setColor] = useState("#fff");
const [color, setColor] = useState('#fff');

return (
<ColorPicker color={color} onChange={(color) => setColor(color.hex)} />
);
return <ColorPicker color={color} onChange={color => setColor(color.hex)} />;
};
```

Expand Down Expand Up @@ -85,19 +83,19 @@ You can add a custom theme for styling the colorpicker component or choose one f
**Custom Theme**

```js
import ColorPicker from "react-pick-color";
import ColorPicker from 'react-pick-color';

const ThemedColorPicker = () => {
return (
<ColorPicker
color="#3573CB"
theme={{
background: "lightgrey",
inputBackground: "grey",
borderColor: "darkgrey",
borderRadius: "8px",
color: "black",
width: "320px"
background: 'lightgrey',
inputBackground: 'grey',
borderColor: 'darkgrey',
borderRadius: '8px',
color: 'black',
width: '320px'
}}
/>
);
Expand All @@ -109,22 +107,13 @@ const ThemedColorPicker = () => {
`react-pick-color` exports a `dark` and a `light` theme.

```js
import ColorPicker, { themes } from "react-pick-color";
import ColorPicker, { themes } from 'react-pick-color';

const ThemedColorPicker = () => {
return <ColorPicker color="#3573CB" theme={themes.dark} />;
};
```

## Hooks

```js
import { useColor } from "react-pick-color";

// A color as a hex string or rgba/hsla object. Will return a color object.
const { hex, rgb, hsl, hsv, alpha } = useColor("#fff");
```

## Roadmap

- [ ] Size optimization
Expand Down
16 changes: 0 additions & 16 deletions src/hooks/useColor.ts

This file was deleted.

14 changes: 6 additions & 8 deletions src/index.tsx
@@ -1,7 +1,6 @@
import ColorPicker from "./components/ColorPicker/ColorPicker";
import themes from "./themes";
import useColor from "./hooks/useColor";
import { initColor } from "./components/ColorPicker/helper";
import ColorPicker from './components/ColorPicker/ColorPicker';
import themes from './themes';
import { initColor } from './components/ColorPicker/helper';
import {
HslColor,
HsvColor,
Expand All @@ -10,12 +9,11 @@ import {
Theme,
Color,
ColorCombination,
ColorObject,
} from "./types";
ColorObject
} from './types';

export {
themes,
useColor,
initColor,
ColorPicker,
HslColor,
Expand All @@ -25,6 +23,6 @@ export {
Theme,
Color,
ColorCombination,
ColorObject,
ColorObject
};
export default ColorPicker;

0 comments on commit cf09507

Please sign in to comment.