Hook that plays an audio file from a source URL.

Untitled

This example demonstrates how HTML’s built-in audio element can be embedded directly into a React page, providing native playback controls. The code uses a standard `<audio>` tag with the `controls` attribute to render a play/pause interface and timeline for a horse.ogg file. It relies on React’s JSX syntax to declare the element, with no additional JavaScript libraries or custom audio APIs. The page is minimal, showing only the audio player without surrounding content, highlighting the simplicity of integrating media into a React application.

Oocean1225

69% match

JavaScript事件

This example demonstrates a simple user interface for selecting and previewing sound effects using native JavaScript event handling. The page provides a dropdown menu with four sound options and a "试听" (preview) button that triggers playback of a fixed audio file hosted remotely. The code uses the HTML `select` and `button` elements, with an inline `onclick` handler invoking the `playsound()` function. This function accesses the `audio` element by ID and calls its `play()` method, relying on the browser’s built-in HTML5 audio API rather than any external visualization libraries.

Oocean1225

63% match

Hook that toggles a boolean state.

This example demonstrates a React hook that manages a boolean state and provides a toggle function. It shows how to initialize the state with a default value and update it based on an optional argument. The code uses `useState` to hold the boolean and `useCallback` to memoize the toggle callback, which flips the previous state unless a boolean value is explicitly passed. The hook returns the current state and the callback as a tuple, enabling flexible state control in components.

63% match

Hook that adds a click listener outside of an element.

This example demonstrates a React hook that detects clicks outside a referenced element. It returns a ref to attach to a component, and when a click event occurs, it checks whether the event target is contained within that element. If not, it invokes a callback. The hook uses React’s `useRef`, `useCallback`, and `useEffect` to manage the reference and listener, adding a document-level click listener and cleaning it up on unmount. The callback and its dependency list are passed as arguments, allowing flexible, memoized behavior.

Hook that emits document visibility.

This example demonstrates a React hook that tracks whether the browser tab is currently visible to the user. It shows the document’s `visibilityState` and returns a boolean indicating if the page is in the foreground. The hook uses React’s `useState` and `useEffect` to initialize the state and subscribe to the `visibilitychange` event on the document. When the tab’s visibility changes, the event listener updates the state accordingly, and the effect cleans up the listener on unmount.

JS function to change links like <a href="something.wav">sound</a> so that they play when clicked

This example shows a JavaScript function that converts links to .wav audio files on a page into click-to-play controls, so users can listen without leaving the page or losing the link’s context. The code selects all anchor elements whose `href` ends with `wav` using `document.querySelectorAll`, then creates a new `Audio` object for each link and assigns the link’s URL as the audio source. It attaches a `click` event listener that prevents the default navigation behavior and calls `audio.play()` to start playback. The approach uses the native Web Audio API and DOM event handling, with no external libraries.

Aamundo

A hook to listen for width changes or scroll-bar show/hide.

This example demonstrates a React hook that detects when a container’s width changes, such as when scroll bars appear or disappear. It shows how to trigger a callback on width resizes without relying on the window’s resize event. The hook creates a hidden iframe element styled to span the full container width, then listens for its `contentWindow`’s `resize` event. The initial width is captured immediately, and the listener is cleaned up on unmount. The code uses React’s `useEffect` and `useRef` APIs directly.

CCurran Kelleher

Hook that emits when the window has focus.

This example demonstrates a React hook that tracks whether the browser window currently has focus, returning a boolean value that updates in real time. It uses the `useState` and `useEffect` hooks from React to manage state and lifecycle events. The hook listens for the native `focus` and `blur` events on the `window` object, updating the state accordingly and cleaning up event listeners on unmount. It reads the initial focus state via `document.hasFocus()` and returns the current focus status, enabling components to react to visibility changes.