Skip to content

alexgschwend/react-admin-color-picker

 
 

Repository files navigation

<ColorInput> and <ColorField> compatible with react-admin v4 and v5

A color picker for react-admin (v4 and v5) using React Color, a collection of color pickers.

color-input.gif

Also includes a color field for just displaying the color value.

color-field.png

Notice

This module was originally created for admin-on-rest by @dreinke and was forked from his repository and this repository.

Installation

npm install react-admin-color-picker

or

yarn add react-admin-color-picker

Usage

import {
    Show,
    TextField,
    Edit,
    TextInput,
    LongTextInput,
} from 'react-admin';

import { ColorField, ColorInput } from 'react-admin-color-picker';

export const PostShow = () => (
    <Show>
        <TextField source="title" />
        <TextField source="body" />
        <ColorField source="color" />
    </Edit>
);

export const PostEdit = () => (
    <Edit>
        <TextInput source="title" validate={[required()]} />
        <LongTextInput source="body" validate={[required()]} />
        <ColorInput source="color" />
    </Edit>
);

You can customize the color picker using the picker attribute.

<ColorInput source="color" picker="Sketch"/>

Pickers

  • Alpha
  • Block
  • Chrome (default)
  • Circle
  • Compact
  • Github
  • Hue
  • Material
  • Photoshop
  • Sketch
  • Slider
  • Swatches
  • Twitter

License

This library is licensed under the MIT Licence.

About

<ColorInput> and <ColorField> components for react-admin v4 & v5

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 95.1%
  • CSS 4.9%