react-color-modal

Yet another color picker component for React

Usage no npm install needed!

<script type="module">
  import reactColorModal from 'https://cdn.skypack.dev/react-color-modal';
</script>

README

react-color-modal

build npm version

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

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

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 / 開発者

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

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