React hook library, ready to use, written in Typescript.

Overview

useHooks( 🔥 ).ts

React hook library, ready to use, written in Typescript.

— usehooks-typescript.com —

README Sections: About - Hook Summary - Installation - Made with - Contributing - License

Netlify Status Open Source? Yes! Maintained License

🤔 About

This is the repository for usehooks.ts, a Gatsby powered blog hosted with Github & netlify that publishes easy to understand React Hook code snippets.

UseHooks.ts has been strongly inspired by usehooks.com, thanks to him. My objective here is to publish my hooks in Typescript in order to find them quickly

If you'd like to submit new post ideas, improve existing posts, or change anything about the website feel free to submit an issue or pull-request.

📖 Summary

👉 Installation

Note: The project use [email protected] and [email protected].

# Clone the repository
git clone https://github.com/juliencrn/usehooks.ts.git
cd useHooks.ts

# Install dependencies
npm i

# Start
npm start

Others scripts

# Production
npm run build # Create production bundle
npm run serve # Run production bundle

# Development
npm run start # Start and watch app locally
npm run develop # Same as above
npm run clean # Remove gatsby cache and previous builds
npm run lint # Run Eslint checker
npm run lint-fix # Same as above and do fix automatically
npm run format # Run Prettier and do fix automatically
npm run check # Run Typescript types checker
npm run test # Exec lint, check and run Jest
npm run test:watch # Same as above in watch mode
npm run upgrade-interactive # Interactive CLI app to upgrade dependencies

# Content
npm run plop # Create a hook component with CLI tool
npm run copy:hooks # Create *.mdx files from hook's source code
npm run update:readme # Update hooks summary in readme

See more in package.json.

🙌 Made with

React - Typescript - Gatsby - Material-ui - Jest - @testing-library - Mdx - Prism - Dracula colors

🚗 Roadmap

  • Add new hooks
  • Set up automated tests for hooks
  • Add a live preview system to interact with hooks

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check issues page.

💚 Support the project

Give a ⭐ if this project helped you!

Thanks! ❤️

📝 License

Copyright © 2020 Julien Caron.

This project is MIT licensed.


Built with ❤️ with Gatsby & Typescript

Comments
  • Improve useCountdown

    Improve useCountdown

    Hi again @juliencrn, I just moved back to react. I'm thinking on improving the useCountdown hook. But there would be breaking changes so I want to firstly have a small discussion with you.

    Breaking changes

    In the example usage

      const [count, { start, stop, reset }] = useCountdown({
        seconds: 60,
        interval: 500,
        isIncrement: false,
      })
    
    1. (important) Rename seconds to countNumber or startingCount, countStart, etc. Since it is not the real seconds.
    2. (trivial) Change start, stop, reset to startCountdown, stopCountdown, resetCountdown respectively. The default one would be unclear and make the code harder to maintain.
    3. (trivial) Change interval to intervalMs or intervalMilisec specifying its unit.

    Non-breaking changes

    1. Add a countLimit, or limit, countdownLimit, countEnd, etc. to the setting.

    Outcome & alternative

    The final outcome of this proposal would look like this:

      const [count, { startCountdown, stopCountdown, resetCountdown }] = useCountdown({
        countStart: 60,
        intervalMs: 1000, // add 1000 by default
        countStop: 0, // 0 by default
        isIncrement: false,
      })
    

    Alternative is to make a new useIntervalTimer hook to do the same job but with new name.

    Thanks for reading. What's your opinion?

    opened by PabloLION 13
  • Can I PR new functions?

    Can I PR new functions?

    Hi team. I made a ternary Darkmode (based on this repo) like "dark" | "system" | "light" in a project and I want to use it in another project.
    The best way to share it is to upload it on NPM and GitHub. And I think putting it here might be helpful, as I see you have " Add new hooks" in your roadmap. Questions are:

    1. Is this too trivial to add?
    2. Can I make a PR on this repo?
    3. Do you have a Code of Conduct?

    Thanks.

    opened by PabloLION 13
  • Publish on npm?

    Publish on npm?

    This great repo sounds like a great candidate for publishing on npm for easier updating and security auditing. If someone knows how to set it up, it could also support tree shaking, since each of the hooks is in its own file.

    What do you think?

    opened by vfonic 10
  • Feature/use ternary dark mode

    Feature/use ternary dark mode

    I don't know how to fix my rebase on PR #86 .. So I created a new branch. This is the latest update (repeating PR #86)

    About the SSR problem, I'm going to just apply useMediaQuery, since the useDarkMode is using it as well. We will only need to change one place to fix all.


    The design was for using one button for the minimalist style. You can check it on the top bar of https://www.snippethub.dev/ to see how it works. For me this is better than using an extra button. It keeps the dark/light toggle language and adds a new function. This is how I thought when I wrote the function.

    If we need another toggle, it's better to use the "use dark mode" and a "use system color override".


    The other problem @juliencrn shows in the video is fixed.

    Git workflow: this close #81

    opened by PabloLION 8
  • Source maps seem to be broken in 2.7.0

    Source maps seem to be broken in 2.7.0

    Since the version upgrade from 2.6.0 to 2.7.0, getting the following error repeatedly when trying to build a CRA app:

    WARNING in ./node_modules/usehooks-ts/dist/esm/useDebounce/useDebounce.js
    Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
    Failed to parse source map from '/Users/.../node_modules/usehooks-ts/src/useDebounce/useDebounce.ts' file: Error: ENOENT: no such file or directory, open '/Users/.../node_modules/usehooks-ts/src/useDebounce/useDebounce.ts'
    
    opened by yairy 6
  • `useLocalStorage` creates warning in Next.JS

    `useLocalStorage` creates warning in Next.JS

    Next JS prebuilds pages, so when using the useLocalStorage hook it creates a warning link

    Warning: Text content did not match. Server: "Initial Value" Client: "Stored Value"
    
    opened by graygalaxy 6
  • build(deps): bump file-type from 16.5.3 to 16.5.4 in /site

    build(deps): bump file-type from 16.5.3 to 16.5.4 in /site

    Bumps file-type from 16.5.3 to 16.5.4.

    Release notes

    Sourced from file-type's releases.

    v16.5.4

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 5
  • build(deps): bump terser from 5.9.0 to 5.14.2 in /site

    build(deps): bump terser from 5.9.0 to 5.14.2 in /site

    Bumps terser from 5.9.0 to 5.14.2.

    Changelog

    Sourced from terser's changelog.

    v5.14.2

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    • Source maps improvements (#1211)
    • Performance improvements in long property access evaluation (#1213)

    v5.14.1

    • keep_numbers option added to TypeScript defs (#1208)
    • Fixed parsing of nested template strings (#1204)

    v5.14.0

    • Switched to @​jridgewell/source-map for sourcemap generation (#1190, #1181)
    • Fixed source maps with non-terminated segments (#1106)
    • Enabled typescript types to be imported from the package (#1194)
    • Extra DOM props have been added (#1191)
    • Delete the AST while generating code, as a means to save RAM

    v5.13.1

    • Removed self-assignments (varname=varname) (closes #1081)
    • Separated inlining code (for inlining things into references, or removing IIFEs)
    • Allow multiple identifiers with the same name in var destructuring (eg var { a, a } = x) (#1176)

    v5.13.0

    • All calls to eval() were removed (#1171, #1184)
    • source-map was updated to 0.8.0-beta.0 (#1164)
    • NavigatorUAData was added to domprops to avoid property mangling (#1166)

    v5.12.1

    • Fixed an issue with function definitions inside blocks (#1155)
    • Fixed parens of new in some situations (closes #1159)

    v5.12.0

    • TERSER_DEBUG_DIR environment variable
    • @​copyright comments are now preserved with the comments="some" option (#1153)

    v5.11.0

    • Unicode code point escapes (\u{abcde}) are not emitted inside RegExp literals anymore (#1147)
    • acorn is now a regular dependency

    v5.10.0

    • Massive optimization to max_line_len (#1109)
    • Basic support for import assertions
    • Marked ES2022 Object.hasOwn as a pure function
    • Fix delete optional?.property
    • New CI/CD pipeline with github actions (#1057)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 5
  • build(deps): bump moment from 2.29.1 to 2.29.4 in /site

    build(deps): bump moment from 2.29.1 to 2.29.4 in /site

    Bumps moment from 2.29.1 to 2.29.4.

    Changelog

    Sourced from moment's changelog.

    2.29.4

    • Release Jul 6, 2022
      • #6015 [bugfix] Fix ReDoS in preprocessRFC2822 regex

    2.29.3 Full changelog

    • Release Apr 17, 2022
      • #5995 [bugfix] Remove const usage
      • #5990 misc: fix advisory link

    2.29.2 See full changelog

    • Release Apr 3 2022

    Address https://github.com/moment/moment/security/advisories/GHSA-8hfj-j24r-96c4

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 5
  • build(deps): bump gatsby-plugin-mdx from 3.7.0 to 3.15.2 in /site

    build(deps): bump gatsby-plugin-mdx from 3.7.0 to 3.15.2 in /site

    Bumps gatsby-plugin-mdx from 3.7.0 to 3.15.2.

    Release notes

    Sourced from gatsby-plugin-mdx's releases.

    v3.14 (September 2021 #1)

    Welcome to [email protected] release (September 2021 #1)

    This is the final minor release for gatsby v3. Gatsby v4 beta is already published behind the next npm tag and the next stable release will be [email protected]. See what's inside!

    We will keep publishing patches for 3.14.x with hotfixes until 4.0.0 stable is published and at least several weeks after.

    Key highlights of this release:

    Also, check out notable bugfixes.

    Bleeding Edge: Want to try new features as soon as possible? Install [email protected] and let us know if you have any issues.

    Previous release notes

    Full changelog

    v3.13 (August 2021 #3)

    Welcome to [email protected] release (August 2021 #3)

    Key highlights of this release:

    Also check out notable bugfixes.

    Bleeding Edge: Want to try new features as soon as possible? Install [email protected] and let us know if you have any issues.

    Previous release notes

    Full changelog

    v3.12 (August 2021 #2)

    Welcome to [email protected] release (August 2021 #2)

    Key highlights of this release:

    ... (truncated)

    Changelog

    Sourced from gatsby-plugin-mdx's changelog.

    3.15.2 (2022-06-02)

    Bug Fixes

    3.15.1 (2022-06-01)

    Note: Version bump only for package gatsby-plugin-mdx

    3.15.0 (2022-05-24)

    🧾 Release notes

    Note: Version bump only for package gatsby-plugin-mdx

    3.14.0 (2022-05-10)

    🧾 Release notes

    Bug Fixes

    3.13.0 (2022-04-26)

    🧾 Release notes

    Note: Version bump only for package gatsby-plugin-mdx

    3.12.1 (2022-04-13)

    Note: Version bump only for package gatsby-plugin-mdx

    3.12.0 (2022-04-12)

    🧾 Release notes

    Note: Version bump only for package gatsby-plugin-mdx

    3.11.1 (2022-03-31)

    Note: Version bump only for package gatsby-plugin-mdx

    3.11.0 (2022-03-29)

    🧾 Release notes

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 5
  • build(deps): bump devcert from 1.2.0 to 1.2.1 in /site

    build(deps): bump devcert from 1.2.0 to 1.2.1 in /site

    Bumps devcert from 1.2.0 to 1.2.1.

    Commits
    Maintainer changes

    This version was pushed to npm by jzetlen, a new releaser for devcert since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 5
  • useWindowSize debounce options

    useWindowSize debounce options

    I noticed that useWindowSize is hard coded without a method debounce the setState call. It causes a significant overhead that I lack a means to offset. I rigged up a super basic optional debounce built on lodash to open discussion about how we could handle it. Obviously we'd want to substitute this package's debounce if we use it. There's some conversation to be had about exporting the setTimeout in useDebounce.ts to ensure it's standard.

    hooks/useWindowSize.ts

    import { useState } from "react";
    import { useEventListener, useIsomorphicLayoutEffect } from "usehooks-ts";
    
    import { debounce } from "lodash";
    
    interface WindowSize {
      width: number;
      height: number;
    }
    
    type OmitFirst<T extends any[]> = T extends [infer A, ...infer R] ? R : never;
    type DebounceArgs = OmitFirst<Parameters<typeof debounce>>;
    
    type UseWindowSize = (options?: { debounceArgs?: DebounceArgs }) => WindowSize;
    const useWindowSize: UseWindowSize = (options = {}) => {
      const { debounceArgs } = options;
      const [windowSize, setWindowSize] = useState<WindowSize>({
        width: 0,
        height: 0,
      });
    
      const handleSize = () => {
        console.info(window.innerWidth); // Temporary so you can see it firing more easily.
        setWindowSize({
          width: window.innerWidth,
          height: window.innerHeight,
        });
      };
      const debouncedHandleSize = debounceArgs
        ? debounce(handleSize, ...debounceArgs)
        : handleSize;
    
      useEventListener("resize", debouncedHandleSize);
    
      // Set size at the first client-side load
      useIsomorphicLayoutEffect(() => {
        handleSize();
        // eslint-disable-next-line react-hooks/exhaustive-deps
      }, []);
    
      return windowSize;
    };
    
    export default useWindowSize;
    

    Usage would be dead simple:

    // No debounce
      useWindowSize();
    // With debounce
      useWindowSize({
        debounceArgs: [DEBOUNCE_RESIZE_WINDOW_TIMING],
      });
    
    opened by lancegliser 0
  • Initialize windowSize state in useWindowSize to actual window dimensions

    Initialize windowSize state in useWindowSize to actual window dimensions

    Small issue, but I've noticed that initializing the WindowSize to { width: 0, height: 0 }

    1. can cause some unpleasant UI/UX when using it for processing the layout and
    2. causes an unnecessary initial render

    I understand using the window object without clear intentionality can cause issues with SSR, but I'm curious if it's possible to use the lazy initial state of useState() to ensure typeof window !== "undefined":

    Reference / Proposed update:

    const [windowSize, setWindowSize] = useState<WindowSize>(() => ({
      width: window.innerWidth,
      height: window.innerHeight,
    }))
    
    opened by lewxdev 0
  • useLocalStorage set function does not entirely comply with useState

    useLocalStorage set function does not entirely comply with useState

    the set function given by useState, guarantees that if it is called with a function argument, the first parameter will be the current value of the state. However, in useLocalStorage, this is not always true. in the case that a render does not happen between two set calls.

    Example:

    const [n, setN] = useState(0);
    
    useEffect(() => {
      setN(n => {
        console.log('state value:', n);
        return n + 1;
      });
      setN(n => {
        console.log('state value:', n);
        return n + 1;
      });
    }, []);
    

    This code will print out

    0
    1
    

    useLocalStorage on the other hand:

    const [n, setN] = useLocalStorage('example-key', 0);
    
    useEffect(() => {
      setN(n => {
        console.log('state value:', n);
        return n + 1;
      });
      setN(n => {
        console.log('state value:', n);
        return n + 1;
      });
    }, [])
    
    0
    0
    

    The problem stems from line 55 where the stored value is used instead of reading the current value from localstorage. I copied the hook locally and changed it to readValue() and this fixed the issue.

    Im sure theres something to be said here of performance, but i havent done any testing. possibly using a ref would be better suited for the task. Id be happy to whip up an implementation if this is something you're interested in!

    Edit: off by one errors in code

    opened by valyrie97 1
  • [Suggestion] useScript

    [Suggestion] useScript

    I'm curious if the community would find this change to the call signature of useScript at all useful:

    function useScript(src: string, shouldLoad: boolean = true, removeOnUnmount: boolean = false): Status { ... }
    

    shouldLoad could be used for something, like, an environment or privacy flag:

    useScript('//some-script.js', isProduction) // or
    useScript('//some-script.js', !isTest) // or
    useScript('//some-script.js', user.isAnonymous)
    

    removeOnUnmount could be used to remove the created script when the component calling useScript unmounts. Examples could be "one-shot" third party scripts that someone might just want to be present for a specific page of the app. Something like a HubSpot form that serves a specific use case, like Signing Up for an account.

    If these sound like good ideas I'm happy to open a PR making the aforementioned changes.

    opened by curtvict 1
  • [Feature] useDocumentTitle

    [Feature] useDocumentTitle

    I'm curious if the community would fine this simple hook useful:

    import { useEffect } from 'react';
    
    const useDocumentTitle = (title: string) => {
      useEffect(() => {
        window.document.title = title;
      }, [title]);
    };
    
    export default useDocumentTitle;
    

    It's just a lil something we've had sitting around our codebase which cleans a pretty repeatable pattern up pretty nicely.

    If so I'm happy to spin up a PR to include it.

    opened by curtvict 1
Owner
Julien
French 🇫🇷 front-end developer 👨🏽‍💻. Open-source, Linux, Rust, Typescript, React lover ❤️
Julien
A React.js hook enabling easy management of various click types(single, double & long) written in TypeScript.

react-clicks react-clicks is a React.js hook enabling easy management of various click types(single, double & long click) . Written in TypeScript.

Manjodh Singh 1 Apr 3, 2022
A hook-based multistep wizard library with vast control over the logic of the user as per use-case.

A hooks-based multistep wizard (what I call it a machine ?? ) built for React which is flexible and easy to use. Huge shout out to jcmcneal for the Re

Adiat Hasan 11 Sep 20, 2022
Essential React hooks for FiveM NUI development written in Typescript

React FiveM Hooks Essential React hooks for FiveM NUI development written in Typescript Install the package yarn add react-fivem-hooks Wrap the compon

Anton Stjernquist 8 Aug 7, 2022
💣 Legendary game written in React with Hooks and Typescript

Minesweeper React Typescript Game Legendary game written in React with Hooks and Typescript Demo See demo here How to play Mines are scattered through

Igor 22 Jul 3, 2022
Keep-react-hook-form - A lib to store react-hook-form values in session storage

Keep-react-hook-form - A lib to store react-hook-form values in session storage

Christopher 1 Jan 27, 2022
React-use-regex - A react hook for processing regular expressions

React-use-regex - A react hook for processing regular expressions

Isaac Kwok 1 Jan 27, 2022
r3f-spline is a React hook that lets you use your Spline scene with react-three-fiber

r3f-spline r3f-spline is a React hook that lets you use your Spline scene with react-three-fiber. ?? Spline is a friendly 3d collaborative design tool

Spline 42 Sep 14, 2022
React hook for conveniently use Fetch API

react-fetch-hook React hook for conveniently use Fetch API. Tiny (556 B). Calculated by size-limit Both Flow and TypeScript types included import Reac

Ilya Lesik 346 Sep 22, 2022
A react hook to use scroll position

react-use-scroll-position A react hook to use scroll position. Usage In a React functional component: import React from 'react'; // Usually you would

Wenchen Li 46 May 1, 2022
React >=16.7 hook, allowing to use standard Redux middleware with useReducer

React useMiddleware hook Redux compatible middleware provider for React >=16.7 Hooks react-useMiddleware allows you to use all existing Redux middlewa

Art Deineka 19 Sep 22, 2021
use css in js with react hook.

style-hook easy to write dynamic css features use css in react hook easy to get started install use npm npm i -S style-hook or use yarn yarn add style

null 16 Mar 5, 2022
🎸 React Hook to use realtime last.fm data and display your currently played song in your application.

Stream your currently playing song through last.fm as a React hook. Features ?? Tiny: use-last-fm weighs in at less than 700 bytes minified and gzippe

Alistair Smith 97 Sep 24, 2022
use-popper React hook wrapper around Popper.js.

Use Popper Installation Note: React 16.8+ is required for Hooks. With npm npm i use-popper Or with yarn yarn add use-popper import React from 'react';

Alex Sandiiarov 39 Feb 10, 2021
🌙 use-presence is an official react hook for presence.

?? use-presence An official react hook for presence. ?? Installation via NPM npm i --save use-presence via yarn yarn add use-presence ⌨️ Usage import

Matt 4 Dec 18, 2021
🎙 A simple React hook for detecting the use of an Ad Blocker by the user. Built-in TS support.

useDetectAdBlocker ?? A simple React hook for detecting the use of an Ad Blocker by the user. Built with TypeScript (built-in type safety and support)

Filippo Fonseca 0 Dec 23, 2021
Use-clipboard-api - A React Hook that consumes Web Clipboard API

?? use-clipboard-api useClipboardApi() is a React Hook that consumes Web Clipboa

Helder Burato Berto 22 Jun 9, 2022
React use-yup-string-validator is a hook that receives a string and a yup string validator and return an array of errors

React use-yup-string-validator Install yarn add react-use-yup-string-validator Usage React use-yup-string-validator is a hook that receives a string a

Plínio Helpa 1 Apr 5, 2022
use-redux reduxuse-redux A hook to bind redux.

DEPRECATED Hook to access redux ⚠️ react-redux now provide hooks support. I strongly recommend you to use the official react-redux implementation. If

Florent Lepretre 63 Apr 16, 2022
Use-p2 - React hooks for p2-es. Use this in combination with react-three-fiber

yarn add @react-three/p2 React hooks for p2-es. Use this in combination with re

Poimandres 100 Sep 5, 2022