react-sensible

react-sensible

A collection of sensible, reuseable hooks that cover a vareity of use-cases.

• react-sensible
  • Installation
  • Usage
    • Components
      • Drawer
      • Modal
    • Hooks
      • useOnClickOutside
      • useIntersectionObserver
      • useMediaQuery
      • useDebounce
      • useDisclosure

Installation

yarn add react-sensible framer-motion

Usage

Components

For components you will also need to import CSS

import 'react-sensible/style.css';

Drawer

TODO

Modal

TODO

Hooks

useOnClickOutside

• Use cases: Modal, Dropdown Menu, Context Menu

useIntersectionObserver

• Use cases: Pagination/Infinite scrolling, Virtualization

• Usage:

import { useIntersectionObserver } from 'react-sensible';

export default function Component() {
  const ref = React.useRef<HTMLDivElement>(null);
  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    const data = await fetch(/** Fetch data */).then(res => res.json);
    setData(data);
  };

  useIntersectionObserver({
    root: null,
    target: ref.current,
    onIntersect() {
      fetchData();
    },
  });

  return (
    <div>
      {data.map(item => {
        return <div>{item}</div>;
      })}
      <div ref={ref}>Loading more</div>
    </div>
  );
}

useMediaQuery

• Use cases: Programmatic responsive layouts
• Usage:

import { useMediaQuery } from 'react-sensible';

const Component = () => {
  const isLarge = useMediaQuery('(min-width: 1024px)');

  return isLarge ? (
    /** Laptop UI */
    <div></div>
  ) : (
    /** Mobile UI */
    <div></div>
  );
};

useDebounce

• Use cases: API Calls on input value change
• Usage:

import * as React from 'react';
import { useDebounce } from 'react-sensible';

export default function Component() {
  const [value, setValue] = React.useState<string>('');
  const debouncedValue = useDebounce(value);

  React.useEffect(() => {
    // Run side-effect on debounced value (like an api call)
  }, [debouncedValue]);

  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

useDisclosure

• Credits: Chakra UI

• Use cases: Accordion, Modal, Dropdown Menu

• Usage:

import useDisclosure from '~/hooks/use-disclosure';

const Component = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <div>
      <button onClick={onOpen}>Open menu</button>
      <button onClick={onClose}>Close menu</button>
      {isOpen ? <div className="menu"></div> : null}
    </div>
  );
};