https://github.com/gibbok/react-color-picker-palette
ColorPickerPalette is a React reusable color picker palette written in TypeScript.
https://github.com/gibbok/react-color-picker-palette
color-palette color-picker color-pickercursor javascript palette react
Last synced: 3 months ago
JSON representation
ColorPickerPalette is a React reusable color picker palette written in TypeScript.
- Host: GitHub
- URL: https://github.com/gibbok/react-color-picker-palette
- Owner: gibbok
- License: mit
- Created: 2016-07-05T14:03:06.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-07-03T14:56:03.000Z (almost 3 years ago)
- Last Synced: 2025-03-18T09:46:07.960Z (3 months ago)
- Topics: color-palette, color-picker, color-pickercursor, javascript, palette, react
- Language: TypeScript
- Homepage: https://gibbok.github.io/react-color-picker-palette/
- Size: 3.44 MB
- Stars: 9
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ColorPickerPalette
ColorPickerPalette is a React reusable color picker palette written in TypeScript.
Live demo here:
## Key features
- Color picking from the palette
- Live color preview
- Color marker
- Color result in RGB and HEX format
- Remember the last color selected
- Automatically save a color to clipboard
- Easy to use and install
- No external dependencies
---
### Installation
This package is [available on npm](https://www.npmjs.com/package/react-color-picker-palette), to install it, use your terminal and navigate to you `package.json` file and run:
`npm i react-color-picker-palette`
### Documentation and examples
Documentation and examples are visible in StoryBook, to run it just execute `npm run storybook`.
### Styles and customization
ColorPickerPalette comes with two elegant light and dark themes, but you can build your theme for the entire component using CSS.
The default themes and examples of customization are visible in StoryBook.
### Developement
Script descriptions:
`nvm use` switch to the right version of Node.js for this project
`npm i` install all dependencies for the project
`npm run clean` cleanup project output
`npm run check` execute all tests including visual regressions
`npm run check:ci` execute all test but no visual regressions
`npm run tsc` perform a TypeScript validation
`npm run tsc:watch` watch files and continuously perform TypeScript validation
`npm run build` build project
`npm run build:watch` watch files and continuously build
`npm run build:prod` make build for production executing all validations
`npm run lint` perform lint validation
`npm run lint:fix` perform lint validation and automatically fix issues
`npm run storybook` run and open StoryBook at
`npm run storybook:build` make build for StoryBook
`npm run storybook:build:local` locally preview build for StoryBook
`npm run storybook:deploy` deploy build StoryBook on GitHub pages
`npm test` execute tests
`npm test:no-coverage` execute tests but do not create a coverage report
`npm test:watch` watch files and continuously test
`npm run loki` execute visual regression testing
`npm run loki:approve` approve difference found during visual regression
`npm run cypress` execute end to end testing in the browser
`npm run cypress:headless` execute end to end testing in headless mode
### Support
Please report any [issues](https://github.com/gibbok/react-color-picker-palette/issues).
For updates follow me on [Twitter](https://twitter.com/gibbok_coding) or [Stack Overflow](https://stackoverflow.com/users/379008/gibbok).