Spindle Hooks

Spindle (Ameba Design System) Hooks

Spindle Hooksは、Amebaのデザインシステム「Spindle」で定義されたコンポーネントの機能部分にフォーカスし、再利用可能なReact Hooksを提供するライブラリです。様々なタイプのプロジェクトに導入できるように設計されています。

インストール

npm install @openameba/spindle-hooks

yarn add @openameba/spindle-hooks

利用方法

Spindle Hooksは以下のように利用できます。

import { render } from 'react-dom';
import ReactDOM from 'react-dom';
import { useTimeDistance } from '@openameba/spindle-hooks';

function App() {
  const publishedAt = '2022-03-11T01:15:51.237Z';
  const [dateString] = useTimeDistance(publishedAt);
  return <time datetime={publishedAt}>{dateString}</time>;
}

ReactDOM.render(<App />, document.querySelector('#app'));

Spindle HooksはSpindle UIと同様にmodule版の配信もしています。利用する際には、導入ガイドを参考にしてください(リンク先はspindle-uiなのでspindle-hooksに置き換えてください)。

Hooks 一覧

利用可能なReact Hooksは、Storybookで公開されています。

ブラウザサポート

Spindle HooksはGoogle Chrome最新版で動作確認しています。それ以外のブラウザではAmebaの推奨環境に基づき表示・動作に問題がある場合は対応していきます。

開発方法

yarn install
yarn dev # storybookが起動します

新規Hooksを追加する際には利用方法がイメージしやすいようにStorybookも追加します。 必要に応じてユニットテストも追加します。

ユニットテストは以下のように実行します。

yarn test:interaction

ライセンス

Spindle HooksはMITライセンスで公開されています。ただし、アイコンはSpindle Iconsに準じて、Creative Commons BY-NC-ND 4.0ライセンスで公開されています。

関連ドキュメント

• Design Doc