Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@tourepedia/react-hooks

sembark4MITdeprecated0.5.5TypeScript support: included

maintenance issues

Common utility react hooks

readme

React Hooks

Some helper react hooks

Install

npm install --save @tourepedia/react-hooks

Usage

useDidMount

Call a function on component's didMount Lifecycle

import { useDidMount } from "@tourepedia/react-hooks"

function App() {
  useDidMount(() => {
    // only called on mount
    fetchTheData()
  })
}

useDidUpdate

Call a function only in component's didUpdate Lifecycle.

import { useDidUpdate } from "@tourepedia/react-hooks"

function App({ count }) {
  useDidUpdate(() => {
    // called when the count changes
  }, [count])
}

useOnce

Only call a function once in a component's Lifecycle

import { useOnce } from "@tourepedia/react-hooks"

function App() {
  useOnce(() => {
    // only called once
    fetchTheData()
  })
}

useEnforceFocus

Enforces focus to be contained in a container and return back to last focused element based on a condition

useEnforceFocus(
  containerRef, // React.Ref: of the container
  shouldBeFocused, // boolean: (true) to toggle the focus enforcement
  config: {
    autoFocus // boolean: (true) should the container be autoFocus
    enforceFocus // boolean: (true) should return the focus to the last focused element
  }
)
import { useRef, useState } from "react"
import { useEnforceFocus } from "@tourepedia/react-hooks"

function App() {
  const containerRef = useRef()
  const [shouldBeFocused, toggleShouldFocus] = useState(false)
  // will focus the form container when shouldBeFocused is set to true
  useEnforceFocus(containerRef, shouldBeFocused)
  return (
    <div>
      <form className="container" ref={containerRef}>
        <input type="email" autoFocus />
        <button type="submit">Save</button>
      </form>
      <button onClick={() => toggleShouldFocus(!shouldBeFocused)}>
        Toggle Focus
      </button>
    </div>
  )
}

changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

0.5.5 (2020-08-22)

Note: Version bump only for package @tourepedia/react-hooks

0.5.4 (2019-11-06)

Bug Fixes

  • dialog: dialog not working (5670de9)

0.5.3 (2019-11-01)

Bug Fixes

  • hooks: usefetchstate passing params as array (61de0e4)

0.5.2 (2019-10-09)

Bug Fixes

  • hook-dialog: fix focus and remounting issue in dialog (74f91c4)

0.5.1 (2019-10-09)

Bug Fixes

  • enforce-hook: focus not working properly back to last one (dec0b11)

0.5.0 (2019-10-06)

Features

0.4.1 (2019-10-03)

Note: Version bump only for package @tourepedia/react-hooks

0.4.0 (2019-09-28)

Bug Fixes

  • enforce-focus-hook: focusing not working for delayed renders (61701c6)

Features

  • react-hook: add useRootClose hook for off interaction (3c4d647)

0.3.2 (2019-09-21)

Bug Fixes

  • fetch-hook: take the intitial data from props (4668a11)
  • hooks: use callback for fetch hooks (235a534)

0.3.1 (2019-06-08)

Bug Fixes

  • react-hooks: handle where document may be null (ff312e9)

0.3.0 (2019-06-02)

Features

  • react-hooks: add fetch state hook for async data (956a27e)

0.2.7 (2019-06-01)

Bug Fixes

  • types: types are not getting recognized by typescript (ab5d5b1)

0.2.6 (2019-06-01)

Bug Fixes

  • module: add module key for package (0cc31c8)

0.2.5 (2019-05-31)

Note: Version bump only for package @tourepedia/react-hooks

0.2.4 (2019-05-31)

Note: Version bump only for package @tourepedia/react-hooks

0.2.3 (2019-05-31)

Bug Fixes

  • react-hooks: docs for react hooks (1a2b06f)

0.2.2 (2019-05-31)

Note: Version bump only for package @tourepedia/react-hooks

0.2.1 (2019-05-30)

Note: Version bump only for package @tourepedia/react-hooks

0.2.0 (2019-05-30)

Features

  • react-hooks: add some useful react hooks (c91c5bb)