Components
This code implements an interactive bar chart poll using React, Framer Motion, and a styling solution (likely CSS framework). It allows users to vote for different options, dynamically updating a bar chart to visualize the results. The component consists of three parts:
BarPoll: This is the main component that renders the entire poll section. It uses useState to manage the vote counts for each option. It divides the UI into two sections: Options and Bars.
Options: This component displays interactive buttons for each poll option. Each button increments the vote count for the selected option using handleIncrementVote, which updates the state via setVotes. The update utilizes a functional update pattern (setVotes((pv) => ...) ) to ensure correct state updates. The component also displays the total number of votes and a reset button to clear all votes.
Bars: This component renders the bar chart. It calculates the height of each bar based on the proportion of votes it received and uses Framer Motion's motion.span to animate the bar height with a spring effect. The chart dynamically adjusts to the number of options.
The code leverages React's state management for interactivity, Framer Motion for smooth animations, and a styling solution (likely a CSS framework) for visual appeal. It's suitable for applications where user engagement and visual data representation are important, such as surveys, feedback forms, or simple opinion polls. For example, it could be used on a website to gauge user preferences on a design feature or to collect feedback on different product options.
Loading preview...
import BarPoll from "@/components/ui/interactive-bar-chart-poll";
export default function DemoOne() {
return <BarPoll />;
}