react-admin-color-input

    3.0.0-beta.0 • Public • Published

    <ColorInput> and <ColorField>

    A color picker for react-admin 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.

    Installation

    npm install react-admin-color-input --save-dev

    Usage

    import React from 'react';
    import {
        Show,
        TextField,
        Edit,
        TextInput,
        LongTextInput,
    } from 'react-admin';
     
    import { ColorField, ColorInput } from 'react-admin-color-input';
     
    export const PostShow = (props) => (
        <Show {...props}>
            <TextField source="title" />
            <TextField source="body" />
            <ColorField source="color" />
        </Edit>
    );
     
    export const PostEdit = (props) => (
        <Edit {...props}>
            <TextInput source="title" validation={{ required: true }} />
            <LongTextInput source="body" validation={{ required: true }} />
            <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.

    Install

    npm i react-admin-color-input

    DownloadsWeekly Downloads

    1,270

    Version

    3.0.0-beta.0

    License

    MIT

    Unpacked Size

    15.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • vascofg