JSPM

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

The lightest colorpicker.

Package Exports

    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 (@kapto/mui-color) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    <ColorPicker/>

    A popover component to display a color tool box. It uses ColorBox and material-ui-popup-state.

    import { ColorPicker } from "mui-color";
    
    export const Container = () => (
      <div>
        <ColorPicker defaultValue="transparent" />
      </div>
    );

    At first it display a button + an input

    ColorPicker documentation

    <ColorBox />

    A component to display a color tool box

    import { ColorBox } from "mui-color";
    
    export const Container = () => (
      <div>
        <ColorBox defaultValue="transparent" />
      </div>
    );

    ColorBox documentation

    <ColorInput />

    An input component to display/edit color values in different format (plain, hex, rgb, hsl, hsv).

    import { ColorInput } from "mui-color";
    
    export const Container = () => (
      <div>
        <ColorInput defaultValue="red" />
      </div>
    );

    ColorInput documentation

    <ColorPalette />

    A component to display a grid of color buckets.

    import { ColorPalette } from "mui-color";
    
    const palette = {
      red: "#ff0000",
      blue: "#0000ff",
      green: "#00ff00",
      yellow: "yellow",
      cyan: "cyan",
      lime: "lime",
      gray: "gray",
      orange: "orange",
      purple: "purple",
      black: "black",
      white: "white",
      pink: "pink",
      darkblue: "darkblue",
    };
    
    export const Container = () => (
      <div>
        <ColorPalette palette={palette} />
      </div>
    );

    ColorPalette documentation

    <ColorButton />

    Displays a button filled with a color

    import { ColorButton } from "mui-color";
    
    export const Container = () => (
      <div>
        <ColorButton color="red" />
      </div>
    );

    ColorButton documentation

    Roadmap

    v1.1.3 - Current version

    • remove styled-components to have less dependencies and reduce size
    • display wrong color using a red checked box
    • bugs fixes

    Contribute

    Contributions welcome! Read the contribution guidelines first.

    License

    Released under MIT License