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://research.archinc.jp/react-color-modal/api/modules.html
• Demo site: https://research.archinc.jp/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>
      )}
    </>
  );
};

API Documentation / API ドキュメント

All of the exported classes and interfaces are listed in TypeDoc.

このモジュールが export しているすべてのクラスとインタフェースは TypeDoc で閲覧できます。

Credits / 開発者

• Jun Kato, developer

Dependencies / 依存パッケージ

• React
• react-input-slider
• styled-components
• tinycolor2

Staying in touch / 開発者に連絡

We have developed this extension in collaboration with the core developers of Fabric.js and relevant information can be found in their issue tracker.

Twitter @ArchResearchJp で連絡がつきます。

Library in action / 利用例

• Demo site: GitHub Pages accompanied with this library

Copyright (c) 2020-2022 Arch Inc. (Jun Kato)