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ライセンスで公開されています。