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";
import "react-color-modal/dist/styles.css";

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

  // render a color panel with simple status indicator
  return (
    <>
      
      {color && (
        
          Selected color:{" "}
          {" "}
          {color.toHexString()}
        
      )}
    
  );
};

API Documentation / API ドキュメント

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

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

ColorPanel はレイアウト調整用に安定した .color-panel-footer、 .color-panel-swatch クラスと data-slot 属性を公開しています。フッターのコントロール高さは --color-panel-control-height（既定値 2.208em）で変更できます。

Credits / 開発者

Jun Kato, developer

Dependencies / 依存パッケージ

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