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

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

Triggers a specific event on a given element, optionally passing custom data.

Use new CustomEvent() to create an event from the specified eventType and details.
Use el.dispatchEvent() to trigger the newly created event on the given element.
Omit the third argument, detail, if you do not want to pass custom data to the triggered event.

继续阅读 30秒学会 JavaScript 片段 – triggerEvent

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

Adds an event listener to an element that will only run the callback the first time the event is triggered.

Use EventTarget.addEventListener() to add an event listener to an element, storing the reference in a variable.
Use a condition to call fn only the first time the listener is triggered.

继续阅读 30秒学会 JavaScript 片段 – listenOnce

Creates a pub/sub (publish–subscribe) event hub with emit, on, and off methods.

Use Object.create(null) to create an empty hub object that does not inherit properties from Object.prototype.
For emit, resolve the array of handlers based on the event argument and then run each one with Array.prototype.forEach() by passing in the data as an argument.
For on, create an array for the event if it does not yet exist, then use Array.prototype.push() to add the handler
to the array.
For off, use Array.prototype.findIndex() to find the index of the handler in the event array and remove it using Array.prototype.splice().

继续阅读 30秒学会 JavaScript 片段 – createEventHub

Returns a new MutationObserver and runs the provided callback for each mutation on the specified element.

Use a MutationObserver to observe mutations on the given element.
Use Array.prototype.forEach() to run the callback for each mutation that is observed.
Omit the third argument, options, to use the default options (all true).

继续阅读 30秒学会 JavaScript 片段 – observeMutations

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

Run the callback whenever the user input type changes (mouse or touch). Useful for enabling/disabling code depending on the input device. This process is dynamic and works with hybrid devices (e.g. touchscreen laptops).

Use two event listeners. Assume mouse input initially and bind a touchstart event listener to the document.
On touchstart, add a mousemove event listener to listen for two consecutive mousemove events firing within 20ms, using performance.now().
Run the callback with the input type as an argument in either of these situations.

继续阅读 30秒学会 JavaScript 片段 – onUserInputChange