日本語Japan Flag
英語Great Britain Flag

NPM パケージ

React Next Parallax

import { Parallax } from 'react-next-parallax';

<Parallax>
  <div className="container">
    <img src="image1.jpg" data-parallax-offset="-5" />
    <img src="image2.jpg" />
    <img src="image3.jpg" data-parallax-offset="5" />
  </div>
</Parallax>
  • TypeScript
  • React
  • Component
  • Cypress
  • Storybook

視差効果を提供する高性能でカスタマイズ可能な React コンポーネント

  • 使いやすい
  • 依存関係ゼロ
  • 高度にカスタマイズ可能
  • パフォーマンスを念頭に置いて開発
  • React Hooks/TypeScript を使用してゼロから開発されています (別のライブラリの移植ではありません)
  • コンポーネントの再レンダリングの最小量
  • JSDocによるプロップの説明
  • Cypress/Storybook を使用して広範囲にテスト済み
  • React Next Tilt のすべての機能を追加

React Flip Tilt

import { FlipTilt } from 'react-flip-tilt';

// image source
<FlipTilt front="/front.webp" back="/back.webp" />

// element/component
<FlipTilt front={<div>...</div>} back={<MyComponent />} />

// mixture of both
<FlipTilt front="/front.webp" back={<MyComponent />} />
  • TypeScript
  • React
  • Component
  • Cypress
  • Storybook

フリップチルト効果を提供する高性能でカスタマイズ可能な React コンポーネント

  • 使いやすい
  • 依存関係ゼロ
  • 高度にカスタマイズ可能
  • パフォーマンスを念頭に置いて開発
  • React Hooks/TypeScript を使用してゼロから開発されています (別のライブラリの移植ではありません)
  • コンポーネントの再レンダリングの最小量
  • JSDocによるプロップの説明
  • Cypress/Storybook を使用して広範囲にテスト済み
  • React Next Tilt のすべての機能を追加

React Next Tilt

import { Tilt } from 'react-next-tilt';

// image
<Tilt>
  <img src="path/to/image.jpg" />
</Tilt>

// element
<Tilt>
  <div>...</div>
</Tilt>

// component
<Tilt>
 <MyComponent /> 
</Tilt>
  • TypeScript
  • React
  • Component
  • Cypress
  • Storybook

React 用の高性能でカスタマイズ可能な Tilt コンポーネント

  • 使いやすい
  • 依存関係ゼロ
  • 高度にカスタマイズ可能
  • タッチとジャイロスコープのサポート
  • 2 つのカスタマイズ可能なグレア効果 (スポット/ライン)
  • パララックス対応
  • 「ホバー/タッチ時の拡大縮小」のサポート
  • 「タッチ時のスクロールを無効にする」のサポート
  • 「全ページリスニング」のサポート
  • 「コントロールエレメント」のサポート
  • エッジ付近でのギクシャクした動きはありません
  • パフォーマンスを念頭に置いて開発されています (requestAnimationFrame()、will-change、その他の最適化)
  • React Hooks/TypeScript を使用してゼロから開発されています (別のライブラリの移植ではありません)
  • コンポーネントの再レンダリングの最小量
  • JSDocによるプロップの説明
  • Cypress/Storybook を使用して広範囲にテスト済み

Fetch Multi Signal

import { fetchMS as fetch } from 'fetch-multi-signal';

// timeout in milliseconds
const timeout = 1000;

// signals
const controller1 = new AbortController();
const controller2 = new AbortController();
const controller3 = new AbortController();
const signal1 = controller1.signal;
const signal2 = controller2.signal;
const signal3 = controller3.signal;

fetch('url', {
  timeout,
  signal: signal1,
  signals: [signal2, signal3],
});
  • TypeScript
  • Fetch API
  • Abort Signal
  • Async
  • Timeout

タイムアウトの設定と複数の中止信号の使用を可能にする Fetch API のラッパー。

  • fetch() にタイムアウト オプションを追加します。
  • 複数の AbortSignal を受け入れ、それらのいずれかが中止された場合は中止します。
  • AbortController().signal と AbortSignal.timeout() の両方で動作します
  • fetch() と互換性があり、ドロップインの代替として使用できます。
  • Jest を使用したカスタム単体テスト
  • Node.js v18以降と互換性あり

Multi Signal

import multiSignal from 'multi-signal';

// signals
const controller1 = new AbortController();
const controller2 = new AbortController();
const signal1 = controller1.signal;
const signal2 = controller2.signal;
const timeoutSignal = AbortSignal.timeout(2000);

// signals as separate arguments
const signal = multiSignal(signal1, signal2);

// signals as array
const signal = multiSignal([signal1, signal2]);

// different signal types
const signal = multiSignal(signal1, signal2, timeoutSignal);
  • TypeScript
  • Abort Signal
  • Async
  • Timeout

一見するとシンプルなやることアプリのように見えますが、ユーザー認証、データベース統合、遅延補正、ドラッグ アンド ドロップの並べ替え、アニメーションなどの追加機能が含まれています。

  • 複数のアボート信号を 1 つの信号にマージします。
  • いずれかの入力信号が中止された場合、返された信号も中止されます。
  • AbortSignal() の代わりに使用できます。
  • AbortController().signal と AbortSignal.timeout() の両方で動作します
  • Jest を使用したカスタム単体テスト
  • Node.js v16以降と互換性あり