Skip to main content
100%

Graduated Cards Container/Component

✓ Published0🌍 Public
Aamoradi
Last edited Nov 7, 2017
Created on Nov 7, 2017

This React component renders a set of radio-button cards that display an icon and label for each option, allowing users to select one value from a group. It fetches card data from a Redux store via `connect` and `fetchGraduatedCards`, then maps over the `graduatedCards` array to create interactive card elements. The component uses CSS transitions to swap between inactive and active icon images on hover or selection, with a hidden radio input managing the chosen state.

AI-generated description

Similar vizzes

Loading thumbnail…

React Radio Buttons

This example demonstrates a simple React user interface where two radio buttons, labeled Size and Count, toggle a selection. The interface uses React’s `useState` hook to track the currently chosen value, which is logged to the console on change. The `Radio` component receives an `onSelectedValueChange` callback prop, invoked with the selected `event.target.value` upon input change. Built with React 16.13.1 and rendered via `ReactDOM`, it showcases controlled component state management without any external data or visualization libraries.

NNarottam Medhora
66% match
Loading thumbnail…

Cards

This example presents a horizontally scrollable gallery of interactive cards, each displaying an image from a shuffled list of external URLs on its front and descriptive placeholder text on its back. Clicking a card triggers a CSS 3D flip animation, revealing the back content, while hovering lifts the card and shifts neighboring cards horizontally to create a stacked effect. The implementation combines plain JavaScript for DOM manipulation and event handling, alongside D3.js v6 for data shuffling and image loading, with all visual effects driven by CSS transitions and transforms.

MMTR
65% 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
62% match
Loading thumbnail…

Gist bdbc9e7fea0925a8a7abac0066804aef

A React component builds an interactive curriculum vitae where a force-directed graph represents professional experience and skills. Using d3.forceSimulation, the layout positions connected nodes for each role, skill, and technology, with links showing relationships between them. The visualization reads from embedded CV data, allowing users to explore career history and technical expertise through an animated, zoomable network.

SSleepyHarry
60% match
Loading thumbnail…

Concentric circles -linear gradient

A generative visualization renders concentric circles with a linear gradient background. The React component maps over 50 array indices and nested pixel values to position 2,500 semi-transparent circles, using trigonometric functions and random scaling to scatter them from the center. Each circle applies a radial gradient via SVG `<radialGradient>` and a drop-shadow filter. The SVG output uses React’s `createElement` under the hood, with colors derived from index-based RGB values and random opacity, creating a layered, luminous effect against the teal-to-grey backdrop.

NNita
60% match
Loading thumbnail…

React dropdown

A React dropdown component demonstrates a simple interactive selector for family relationships. The example renders a dropdown menu with options like Self, Son, Daughter, and Relative, using the `react-dropdown` library and its default styling. The app is built with React 16 and ReactDOM, with the dropdown’s state managed through the component’s `value` and `options` props. The code uses a plain JavaScript array for the option data and renders the selection within a styled div using React’s JSX syntax.

AAndrea Picciau
60% match
Loading thumbnail…

Concentric circles -linear gradient

This example generates a dense, abstract field of concentric circles with a linear gradient background transitioning from dark blue to grey. The visualization employs a nested loop structure to map 80 angular steps and 80 radial steps, computing each circle’s position with trigonometric functions and randomized offsets. The React component `Circles` renders individual SVG `<circle>` elements, using a radial gradient definition (`#gradient-Saturn`) for fills and a drop-shadow filter. The `fill` property is dynamically assigned in `index.js` via a `radialGradient`, while the SVG canvas measures 960 by 500 pixels. The code relies on React’s `ReactDOM.render()` and maps over arrays to produce the pattern.

NNita
60% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a vertical button list where users can select one of five buttons, causing the chosen button to enlarge and change color while the others shrink and fade. The interface is built using React's `useState` hook to track the selected button index, and ReactDOM renders the `App` component. Styling leverages CSS transitions for smooth scaling and color shifts, with the button container using flexbox to center the selected item and push others outward. The code runs entirely in the browser without external data sources.

Pppal41366@gmail.com
59% match