Poll Bars

A poll. Before anyone has voted each option is a button. After a vote the options turn into bars that grow to each one's share of the votes, with percentages, and the chosen option is marked. Results are read out for each option, along with which one is yours. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add poll-bars

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/poll-bars.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { useState } from "react";
import { PollBars } from "@/components/ui/poll-bars";

export default function Example() {
  const [selected, setSelected] = useState<string>();

  return (
    <PollBars
      selected={selected}
      onVote={setSelected}
      options={[
        { id: "a", label: "Cats", votes: 12 },
        { id: "b", label: "Dogs", votes: 9 },
      ]}
    />
  );
}

Props