A hook that handles the event of clicking outside of the wrapped component.

  • Create a custom hook that takes a ref and a callback to handle the click event.
  • Use the React.useEffect() hook to append and clean up the click event.
  • Use the React.useRef() hook to create a ref for your click component and pass it to the useClickOutside hook.

继续阅读 30秒学会 React 片段 – useClickOutside

A hook that implements fetch in a declarative manner.

  • Create a custom hook that takes a url and options.
  • Use the React.useState() hook to initialize the response and error state variables.
  • Use the React.useEffect() hook to anychronously call fetch() and update the state varaibles accordingly.
  • Return an object containting the response and error state variables.

继续阅读 30秒学会 React 片段 – useFetch

A hook that implements setTimeout in a declarative manner.

  • Create a custom hook that takes a callback and a delay.
  • Use the React.useRef() hook to create a ref for the callback function.
  • Use the React.useEffect() hook to remember the latest callback.
  • Use the React.useEffect() hook to set up the timeout and clean up.

继续阅读 30秒学会 React 片段 – useTimeout

A hook that implements setInterval in a declarative manner.

  • Create a custom hook that takes a callback and a delay.
  • Use the React.useRef() hook to create a ref for the callback function.
  • Use the React.useEffect() hook to remember the latest callback.
  • Use the React.useEffect() hook to set up the interval and clean up.

继续阅读 30秒学会 React 片段 – useInterval

A hook that copies the given text to the clipboard.

  • Use the copyToClipboard snippet to copy the text to clipboard.
  • Use the React.useState() hook to initialize the copied variable.
  • Use the React.useCallback() hook to create a callback for the copyToClipboard method.
  • Use the React.useEffect() hook to reset the copied state variable if the text changes.
  • Return the copied state variable and the copy callback.

继续阅读 30秒学会 React 片段 – useCopyToClipboard

A hook that handles the event of clicking inside the wrapped component.

  • Create a custom hook that takes a ref and a callback to handle the click event.
  • Use the React.useEffect() hook to append and clean up the click event.
  • Use the React.useRef() hook to create a ref for your click component and pass it to the useClickInside hook.

继续阅读 30秒学会 React 片段 – useClickInside

A hook that returns a value based on a media query.

  • Check if window and window.matchMedia exist, return whenFalse if not.
  • Use window.matchMedia() to match the given query, cast its matches property to a boolean and store in a state variable, match, using React.useState().
  • Use React.useEffect() to add a listener for changes and to clean up the listeners after the hook is destroyed.
  • Return either whenTrue or whenFalse based on the value of match.

继续阅读 30秒学会 React 片段 – useMediaQuery

A hook that handles asynchronous calls.

  • Create a custom hook that takes a handler function, fn.
  • Define a reducer function and an initial state for the custom hook’s state.
  • Use the React.useReducer() hook to initialize the state variable and the dispatch function.
  • Define a run function that will run the provided callback, fn, while using dispatch to update state as necessary.
  • Return an object containting the the properties of state (value, error and loading) and the run function.

继续阅读 30秒学会 React 片段 – useAsync