next-web-player

shinigami

simple library for convenient work with Next.js applications

Motivation

In Next.js applications we use the same functions, such as click outside an element, search/sort, or for example a debounce hook. Shinigami contains popular functions for working with Next.js applications, and components that can be used in your application. Some of the basic shinigami components are pagination, endless loading and an improved Image component.

Install

$ npm i shinigami

Functions

1. useOutSideClick

Close your component if click was outside of it, or if some of dependencies changed.

import {useOutSideClick} from "shinigami";

useOutSideClick({
	containerRef,
	setIsOpen,
	dependencies,
	functionInCondition,
	functionAfterCondition,
});

containerRef: Component will be closed if click was outside this container,
setIsOpen: set here your SetStateAction to close Component,
dependencies: use this if you want set some dependencies,
functionInCondition?: additional function, that will work if click was outside Component,
functionAfterCondition?: additional function, that will work after closing your Component or if some of dependencies changed,

Basic Example:

// This hook will close container if click was outside, and also if pathname was changed.
// This wont work without functionAfterCondition();
useOutSideClick({
	containerRef,
	dependencies: [containerRef, pathname],
	setIsOpen,
	functionAfterCondition: () => {
		setIsOpen(false);
	},
});

Components

1. NextImage

This is just a basic component from Next.js wrapped by div to avoid resizes on some devices.

import {NextImage} from "shinigami";

<NextImage
  src={picture}
  alt={username}
  width='w-[128px]'
  height='h-[128px]'
  className='rounded-full object-cover'			
/>