Nattily Primped Monster

    @culturehq/hooks
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.1 • Public • Published

    @culturehq/hooks

    Build Status Package Version

    A set of reusable hooks extracted from the CultureHQ application.

    Getting started

    Install this package through npm (npm install @culturehq/hooks --save) or yarn (yarn add @culturehq/hooks). You can then import and use the hooks from within your app.

    useClickOutside

    Use to hook into when a click event occurs outside of a container. For example, the following code tracks when a user clicks outside of a box to close it.

    import React, { useCallback, useState } from "react";
    import { useClickOutside } from "@culturehq/hooks";
    
    const Box = ({ onClose }) => {
      const containerRef = useClickOutside(onClose);
    
      return <div ref={containerRef}>...</div>;
    };
    
    const App = () => {
      const [open, setOpen] = useState(false);
    
      const onOpen = () => setOpen(true);
      const onClose = useCallback(() => setOpen(false), [setOpen]);
    
      return (
        <>
          <button type="button" onClick={onOpen}>Open</button>
          {open && <Box onClose={onClose} />}
        </>
      );
    };

    useDocumentEvent

    Use to hook into a document event as an effect. For example, the following code tracks when a use hits the spacebar to tell if something should be paused or not.

    import React, { useCallback, useState } from "react";
    import { useDocumentEvent } from "@culturehq/hooks";
    
    const App = () => {
      const [paused, setPaused] = useState(false);
    
      useDocumentEvent(
        "keydown",
        useCallback(
          event => {
            if (event.key === " ") {
              setPaused(value => !value);
            }
          },
          [setPaused]
        )
      );
    
      return <p>{paused ? "Paused" : "Playing"}</p>;
    };

    useEnterPress

    Use to hook into when the user pressed the enter key, for basic confirmations that do not have focus on a button for whatever reason.

    import React, { useCallback, useState } from "react";
    import { useEnterPress } from "@culturehq/hooks";
    
    const App = () => {
      const [pressed, setPressed] = useState(false);
    
      useEnterPress(useCallback(() => setPressed(true), []));
    
      return pressed ? "Thank you." : "Press the enter key to continue.";
    };

    useLazyImport

    Use to code split a large module and only import it once a component has mounted. Can be used for example for a component or a utility module that isn't required on first paint.

    import React from "react";
    import { useLazyImport } from "@culturehq/hooks";
    
    import Spinner from "./Spinner";
    
    const App = () => {
      const HeavyComponent = useLazyImport(() => import("./HeavyComponent"));
    
      return HeavyComponent ? <HeavyComponent /> : <Spinner />;
    };

    useWindowEvent

    Use to hook into a window event as an effect. For example, the following code tracks changes to the window width.

    import React, { useCallback, useState } from "react";
    import { useWindowEvent } from "@culturehq/hooks";
    
    const App = () => {
      const [width, setWidth] = useState(window.innerWidth);
    
      useWindowEvent(
        "resize",
        useCallback(() => setWidth(window.innerWidth), [setWidth])
      );
    
      return <p>{width}</p>;
    };

    Contributing

    Bug reports and pull requests are welcome on GitHub at https://github.com/CultureHQ/hooks.

    License

    The code is available as open source under the terms of the MIT License.

    Keywords

    Install

    npm i @culturehq/hooks

    DownloadsWeekly Downloads

    14

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    14.5 kB

    Total Files

    17

    Last publish

    Collaborators

    • jsantamaria07
    • kddeisz