react-color-modal

react-color-modal is yet another color picker component for React.

react-color-modal は React 用の軽量なカラーパレットです。

npm package: https://www.npmjs.com/package/react-color-modal
API document: https://arch-inc.github.io/react-color-modal/api/
Demo site: https://arch-inc.github.io/react-color-modal/

Usage / 使い方

Simply install the npm package and start using it. TypeScript definitions are available by default. (e.g., index.d.ts)

npm install でインストールできます。 TypeScript の型定義がついてきます。

npm i react-color-modal

import { useState } from "react";
import { ColorPanel } from "react-color-modal";

export const Body = () => {
  // tinycolor instance
  const [color, setColor] = useState(null);

  // render a color panel with simple status indicator
  return (
    <>
      <ColorPanel onColorUpdate={setColor} />
      {color && (
        <p>
          Selected color:{" "}
          <span style={{ backgroundColor: color.toHexString() }} />{" "}
          <code>{color.toHexString()}</code>
        </p>
      )}
    </>
  );
};