JSPM

react-admin-color-components

1.0.4
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 5
  • Score
    100M100P100Q30232F
  • License MIT

ColorInput and ColorField for react-admin based on react-color

Package Exports

  • react-admin-color-components
  • react-admin-color-components/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-admin-color-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-admin-color-components

Color utility components for use in react-admin applications

Installation

npm install react-admin-color-components --save

Usage

colorpicker.png

This package provides a ColorInput component based on the react-color pickers libray, as well as a corresponding ColorField and ColorSquare (which is used to display the current color in both aforementioned components) for use in a react-admin application.

The ColorInput's default picker is the PhotoshopPicker, but the prop picker can be used to override the default. Additional props for the picker can be passed as part of pickerOptions. The picker's header can be overriden using the pickerHeader prop.

The ColorInput accepts most react-admin input props, including validate, defaultValue, fullWidth, helperText, sx, etc., and requires a source to be defined in order to work correctly as a form input or filter.

The ColorInput uses a "fragile controlled" input strategy in which the current field value is stored in React state while the picker is open, and the field value is only updated once onChangeComplete is called, which is usually at the point of closing the picker. If the picker is closed without confirming, such as clicking Cancel on the Photoshop picker, the field's value will not be updated.

This package is based on the previous work of alexgschwend and vascofg, who built similar component libraries.

Contributing

I welcome opened issues and pull requests! This package was primarily geared towards my particular needs, but I'd love to see it cover more use-cases and become useful to a wider audience.

License

This library is licensed under the MIT License.