Spindle Hooks

Spindle (Ameba Design System) Hooks

!MIT licence !npm

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

インストール

``
npm install @openameba/spindle-hooks
`

`
yarn add @openameba/spindle-hooks
`

利用方法

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

`js
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 {dateString};
}

ReactDOM.render(, 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も追加します。
必要に応じてユニットテストも追加します。

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

`sh
yarn test:interaction
``

ライセンス

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

関連ドキュメント

- Design Doc