React Color Picker
Fork of github.com/gibbok/react-color-picker-palette
ColorPickerPalette is a React reusable color picker palette written in TypeScript.
Live demo here: https://gibbok.github.io/react-color-picker-palette/
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, 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 http://localhost:6006/
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.
For updates follow me on Twitter or Stack Overflow.