JSPM – react-color-modal@0.0.16

Package Exports

react-color-modal
react-color-modal/dist/index.es.js
react-color-modal/dist/index.js

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

Readme

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 / 依存パッケージ

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