npm

Share private packages across your team with npm Orgs, now with simplified billing via the aws marketplace!Learn more »

@culturehq/hooks

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

8

version

0.2.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability