JPJapan Flag
ENGreat Britain Flag

NPM Packages

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

A Performant Customizable React Component Providing the Parallax Effect

  • Easy to use
  • Zero dependencies
  • Highly customizable
  • Built with performance in mind
  • Built from the ground up using React Hooks/TypeScript (is not a port of another library)
  • Minimum amount of component re-renders
  • Typed props with JSDoc descriptions
  • Tested extensively using Cypress/Storybook
  • Plus all of the features of 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

A Performant Customizable React Component Providing the Flip-Tilt Effect

  • Easy to use
  • Zero dependencies
  • Highly customizable
  • Built with performance in mind
  • Built from the ground up using React Hooks/TypeScript (is not a port of another library)
  • Minimum amount of component re-renders
  • Typed props with JSDoc descriptions
  • Tested extensively using Cypress/Storybook
  • Plus all of the features of 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

A Performant Customizable Tilt Component for React

  • Easy to use
  • Zero dependencies
  • Highly customizable
  • Touch and Gyroscope support
  • Two customizable glare effects (spot/line)
  • Parallax ready
  • "Scale on Hover/Touch" support
  • "Disable Scroll on Touch" support
  • "Full-Page Listening" support
  • "Control Element" support
  • No jittery movement around the edges
  • Built with performance in mind (requestAnimationFrame(), will-change, and other optimizations)
  • Built from the ground up using React Hooks/TypeScript (is not a port of another library)
  • Minimum amount of component re-renders
  • Typed props with JSDoc descriptions
  • Tested extensively using 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

A wrapper for the Fetch API that allows for setting a timeout and using multiple abort signals.

  • Adds the timeout option to fetch()
  • Accepts multiple AbortSignals and aborts if any of them are aborted.
  • Works with both AbortController().signal and AbortSignal.timeout()
  • Compatible with fetch() and can be used as a drop-in replacement.
  • Custom unit tests using Jest
  • Compatible with 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

A utility that merges multiple abort signals into a single signal.

  • Merges multiple abort signals into a single signal.
  • Returned signal will be aborted if any of the input signals are aborted.
  • Can be used in place of AbortSignal() in any function/utility.
  • Works with both AbortController().signal and AbortSignal.timeout()
  • Custom unit tests using Jest
  • Compatible with Node.js v16+