A multi-purpose alert/confirm/prompt replacement built with shadcn/ui AlertDialog components.

100%

A multi-purpose alert/confirm/prompt replacement built with shadcn/ui AlertDialog components.

✓ Published0🌍 Public

Last edited Apr 2, 2023

Created on Apr 18, 2025

This example demonstrates a reusable dialog system that replaces native alert, confirm, and prompt functions with promise-based APIs. It provides `useAlert`, `useConfirm`, and `usePrompt` hooks that return resolved values—booleans or strings—when the user interacts with the dialog. The implementation uses React’s Context API, `useReducer`, and `useRef` to manage state across an `AlertDialogProvider` component. The UI is built with shadcn/ui’s `AlertDialog`, `Button`, and `Input` components, all rendered inside a form that submits to close the dialog and resolve the pending promise.

AI-generated description

Similar vizzes

Loading thumbnail…

Test

This example presents a minimal React-based data panel as a standalone visualization on a gist. It renders a single panel container, with the component’s behavior defined through an embedded `alert(5)` call, demonstrating a simple interactive or notification trigger. The code leverages the React framework’s component structure, and the visualization is built using TypeScript-style syntax within a `.tsx` file. The data or rendering approach appears limited to a basic DOM element with a JavaScript alert, offering a straightforward, low-level glimpse into panel state handling without external charting or simulation libraries.

AAyanGhatak

62% match

Loading thumbnail…

https://repl.it/CaTr/0 created by Docwali777

This example uses the browser’s native JavaScript `confirm()` dialog to pause execution and display a hard-coded message, “Yep Yep,” as the entire visualization. The page contains no external libraries or data—only a single line of code that triggers a modal alert. After the user dismisses the dialog, the console logs the boolean `true`, indicating the confirmation result. The rendering approach is purely functional, with no canvas, SVG, or DOM graphics involved, demonstrating a minimal, non-visual interaction pattern.

DDocwali777

60% match

Loading thumbnail…

Gist 4974858be3b0a24bbeed1a8fbbade3be

This example shows a collapsible accordion interface built with React, featuring three panels where the first two contain static placeholder text and the third embeds a user-editable input field. It demonstrates nested interactive components within a Bootstrap-style Accordion using the React framework. The code uses React.createElement and a custom class with getInitialState and handleChange methods to manage the input’s state, updating its value as the user types. The accordion and panel components come from a React library, and the example relies on ReactDOM.render to display the instance.

66ewis

59% match

Loading thumbnail…

Gist 70b6d2687f7832a6ef333872bb170b2d

This example demonstrates a responsive application layout with a collapsible sidebar navigation, built using React and Tailwind CSS. The sidebar includes a logo, search input, and navigation items with icons from the Untitled UI icon library. It uses Headless UI’s `Transition` and `Dialog` components to animate a slide-in mobile menu with overlay backdrop, while desktop layout relies on conditional `clsx` classes for active states. The code shows a `Sidebar` component that accepts navigation items as props, with default items for Home, Simulations, Feedback, and Resources.

EErnestoR

57% match

Loading thumbnail…

Todos

A todo list application demonstrates building interactive user interfaces with d3-component, using Redux for state management and d3 transitions for enter and exit animations. The interface supports adding, toggling, and filtering todos by visibility status. The code leverages d3-component’s render, create, and destroy lifecycle hooks, with transition calls animating list item size changes, and a key function binding data to DOM elements.

CCurran Kelleher

56% match

Loading thumbnail…

React Starter

This example demonstrates a straightforward interactive message display built with React 16.10. It initially shows the static text “Welcome” and changes that text to “What can I do?” when the user clicks on the message. The application uses the React `useState` hook to manage the displayed string, and it renders the content into the DOM via `ReactDOM.render`. The code relies on the React and ReactDOM production UMD builds loaded from unpkg, with the app logic defined in an `index.js` module bundled into `bundle.js`. No external data source is used; the interaction is purely client-side state handling.

AAaxellD

56% match

Loading thumbnail…

Gist aac0eca8d414b9a0e631cf8aad0af710

This example demonstrates an interactive React accordion interface where each collapsible panel contains static placeholder text, except for a custom panel that renders a controlled text input. The code uses React’s `createClass` and `setState` to manage the input field’s state, while the accordion relies on React-Bootstrap’s `Accordion` and `Panel` components. It shows how to compose custom child components inside panels while maintaining independent state for nested elements like form inputs. The accordion’s collapsible behavior is driven by React-Bootstrap’s internal event handling, with no external data source or rendering library involved.

66ewis

56% match

Loading thumbnail…

React Hooks Starter

A React Hooks demonstration shows a grid of apple emoji whose count starts at 24 and adjusts with plus/minus buttons. The `Tree` component uses `React.useReducer` to manage the count state, while `React.useEffect` tracks mounting and updates a status message. Each apple renders through a separate `Apple` component that sets a message via `React.useState`. The code uses React 16.10 UMD builds and plain CSS for button styling, with the interactive behavior centered on toggling the reducer actions.

Bbrandon flowers

56% match