/netlify-cms-widget-colorpicker

a color picker widget for Netlify CMS, supports HEX color codes, RGBA, color names and custom values

Primary LanguageJavaScript

STILL UNDER CONSTRUCTION the code is working but the NPM module is not, follow instructions here to import the code directly ... and if someone could help to create the NPM module, it would be awesome, I am new to this.

netlify-cms-widget-colorpicker

A color picker widget for Netlify CMS that supports HEX color codes, alpha channels via RGBA, color names and custom values.

Based on the awesome react-color

-> check out the demo here

Install

As an npm package:

npm install --save netlify-cms-widget-colorpicker
import ColorControl from "netlify-cms-widget-colorpicker";

CMS.registerWidget("color", ColorControl);

Via script tag:

<script src="https://unpkg.com/netlify-cms-widget-color@^0.1.0"></script>

<script>
  CMS.registerWidget("color", ColorControl);
</script>

How to use

Add to your Netlify CMS configuration:

fields:
  - { name: <fieldname>, label: <fieldlabel>, widget: color }

Configuration

The default color picker is the "chrome picker", you can change it via the options

fields:
  - { name: <fieldname>, label: <fieldlabel>, widget: color, picker: github }

The following options are available:

block
chrome
circle
compact
github
sketch
swatches
twitter

Support

For help with this widget, open an issue

Development

Fork the repo, pull the code to your local computer and install dependencies:

npm install

To run a copy of Netlify CMS with the widget loaded for development, use the start script:

npm start

License

MIT Licensed. Copyright Felix Böttcher

Netlify Status