Skip to main content
100%

Gist d873309f3ccea67a21470c6fae865574

✓ Published0🌍 Public
Aandresin87
Last edited Jul 23, 2020
Created on Jul 23, 2020

This example demonstrates an interactive popover component built with React, showcasing both controlled and uncontrolled usage. Users can select a placement position, toggle a close icon, and trigger the popover via buttons for show, toggle, hide, and unset actions. The component uses Reactstrap's Popover and UncontrolledPopover components with lazy loading via React Suspense, and manages positioning through the `PLACEMENTS` configuration. It demonstrates the AtomPopover API, including controlled visibility through `showPopover`, ref-based targeting, and callback throttling with `@s-ui/js`'s throttle utility.

AI-generated description

Similar vizzes

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
66% 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
66% match
Loading thumbnail…

Gist d2073de12ad1688c6348021a4943ffbd

This example demonstrates the React component lifecycle for both parent and child components, showing the order of lifecycle method calls as a user types into an input field. The code defines a `ParentComponent` with an editable text input and a `ChildComponent` that receives the input text as a prop, logging every lifecycle event—from `getDefaultProps` and `getInitialState` through `componentWillMount`, `render`, `componentDidMount`, and update methods like `shouldComponentUpdate` and `componentDidUpdate`—to the console. It uses React’s `createClass` API and `render` from `react-dom` to mount the parent to the DOM. The visualization is a live console trace, not a graphical chart, exposing the exact sequence of lifecycle hooks during initial mount and prop-driven updates.

Aandresmijares
64% 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
63% match
Loading thumbnail…

Gist 4bf048f7f79c05c84eab4ce6e023d20f

This example demonstrates a React accordion interface with three collapsible panels, the third containing a nested React component that renders an editable text input field. The code uses the `react-bootstrap` Accordion and Panel components to structure the collapsible groups, while a custom `Test` component manages its own state via `getInitialState` and `handleChange` to update the input value in real time. The outer `Test` component’s render method creates an inner React class instance, though its parent panel primarily displays static placeholder text. The rendering is handled through `ReactDOM.render` on a specified mount node, with the input’s state initialized to the string "test".

66ewis
63% match
Loading thumbnail…

Gist f65ed8d40fde74355f8585ce0d77845b

This example shows a single interactive button component built with React. The button changes its background color to red when activated, using a boolean class binding that applies the `true` class from a SCSS stylesheet. The component defines a `NavButton` functional component, which imports React and a `style.scss` file, and renders a container with a clickable label. The styling leverages SCSS variables and nested rules to manage the button’s border, radius, and active state, while the container class uses placeholder CSS to define layout. No external data or animation libraries are involved; the behavior is limited to visual state toggling via the class change.

Aamazingandyyy
61% match
Loading thumbnail…

React cheatsheet

This animated React cheatsheet presents reusable code patterns for hooks, state management, and component composition. The example uses React hooks including `useState`, `useEffect`, `useRef`, `useReducer`, and `useContext`, alongside custom hooks like `useTimeout` and higher-order components. It demonstrates conditional JSX rendering, callback-based state updates, and the containment pattern via props slots. The animation shows code snippets transitioning between sections, sourced from a gist by abernier.

Aabernier
61% match
Loading thumbnail…

d3 bootstrap popovers (fix)

A grid of randomly sized circles renders in SVG via d3.js, with each circle linked to a Bootstrap-styled popover that appears on hover. The popover displays a title and an embedded SVG showing a rectangle scaled to ten times the circle’s radius, positioned dynamically using the `tooltip` plugin. The code demonstrates a fixed popover placement with shape-based detection and includes fixes for race conditions in mouseout/mouseenter handling, ensuring the tooltip persists correctly when transitioning between circle and popover.

GGerHobbelt
60% match