react-sensible
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.0 • Public • Published

    react-sensible

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

    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>
      );
    };

    Keywords

    none

    Install

    npm i react-sensible

    DownloadsWeekly Downloads

    7

    Version

    0.4.0

    License

    MIT

    Unpacked Size

    87.5 kB

    Total Files

    10

    Last publish

    Collaborators

    • arn4v