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

Renders a textarea component with a character limit.

  • Use the React.useState() hook to create the content state variable and set its value to value.
    Create a method setFormattedContent, which trims the content of the input if it’s longer than limit.
  • Use the React.useEffect() hook to call the setFormattedContent method on the value of the content state variable.
  • Use a<div> to wrap both the<textarea> and the <p> element that displays the character count and bind the onChange event of the <textarea> to call setFormattedContent with the value of event.target.value.

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

Renders an <input> element with internal state, that uses a callback function to pass its value to the parent component.

  • Use object destructuring to set defaults for certain attributes of the <input> element.
  • Use the React.setState() hook to create the value state variable and give it a value of equal to the defaultValue prop.
  • Use the React.useEffect() hook with a second parameter set to the value state variable to call the callback function every time value is updated.
  • Render an <input> element with the appropriate attributes and use the the onChange event to upda the value state variable.

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

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

Renders a file drag and drop component for a single file.

  • Create a ref called dropRef for this component.
  • Use the React.useState() hook to create the drag and filename variables, initialized to false and '' respectively.
    The variables dragCounter and drag are used to determine if a file is being dragged, while filename is used to store the dropped file’s name.
  • Create the handleDrag, handleDragIn, handleDragOut and handleDrop methods to handle drag and drop functionality, bind them to the component’s context.
  • Each of the methods will handle a specific event, the listeners for which are created and removed in the React.useEffect() hook and its attached cleanup() method.
  • handleDrag prevents the browser from opening the dragged file, handleDragIn and handleDragOut handle the dragged file entering and exiting the component, while handleDrop handles the file being dropped and passes it to props.handleDrop.
  • Return an appropriately styled <div> and use drag and filename to determine its contents and style.
  • Finally, bind the ref of the created <div> to dropRef.

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

Renders a textarea component with a word limit.

  • Use the React.useState() hook to create the content and wordCount state variables and set their values to value and 0 respectively.
  • Create a method setFormattedContent, which uses String.prototype.split(' ') to turn the input into an array of words and check if the result of applying Array.prototype.filter(Boolean) has a length longer than limit.
  • If the afforementioned length exceeds the limit, trim the input, otherwise return the raw input, updating content and wordCount accordingly in both cases.
  • Use the React.useEffect() hook to call the setFormattedContent method on the value of the content state variable.
  • Use a<div> to wrap both the<textarea> and the <p> element that displays the character count and bind the onChange event of the <textarea> to call setFormattedContent with the value of event.target.value.

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

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

Creates an alert component with type prop.

  • Define appropriate CSS styles and animations for the component’s elements.
  • Use the React.setState() hook to create the isShown and isLeaving state variables and set their values to false.
  • Define timeoutId to keep the timer instance for clearing on component unmount.
  • Use the React.setEffect() hook to update the value of isShown to true and clear interval by using timeoutId when component is unmounted.
  • Define closeNotification function to set the component is removed from DOM by displaying fading out animation and set isShown to false via setTimeout().
  • Define the component, which renders the alert component with user defined message and a close button to remove the component from DOM.

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