React-twitter-poll NPM

React Twitter Poll

React-Twitter-Poll is a React library for creating polls like Twitter or Facebook. It is easy to use and flexible, and allows developers to create polls of different types, with different visualization options and analysis data.

Install

NPM

npm i react-twitter-poll

Yarn

yarn add react-twitter-poll

Usage

import React, { useState } from 'react';
import ReactTwitterPoll from 'react-twitter-poll';
import 'react-twitter-poll/dist/index.css';

const dataOptions = [
  {
    id: 0,
    text: "Universitario",
    votes: 18
  },
  {
    id: 1,
    text: "Alianza Lima",
    votes: 14
  },
  {
    id: 2,
    text: "Melgar",
    votes: 3
  },
  {
    id: 3,
    text: "Sporting Cristal",
    votes: 15
  }
]

function App() {
  const [options, setOptions] = useState([...dataOptions]);

  const handleVote = (item: option) => {
    const tempOptions = [...options];
    const index = tempOptions.findIndex(x => x.id === item.id);
    tempOptions[index].votes = tempOptions[index].votes + 1
    setOptions([...tempOptions])
  }

  return (
    <div className="App">
      <br />
      <ReactTwitterPoll
        title='¿Cual es tu equipo favorito de la Liga 1?'
        options={options}
        onVote={handleVote}
        //optionSelected={options[2]}
      />
    </div>
  );
}

export default App;

Component Props

Prop	Type	Required	Default	Description
options	option	✔	undefined	An array of objecst to vote on with keys "id", "text" and "votes"
title	string	✖	undefined	The title of the poll
footerVisible	boolean	✖	true	Whether or not to show a footer with the total number of votes
onVote	(option: option) => void	✔	undefined	A callback function that is called when an option is selected
optionSelected	option	✖	undefined	The selected option
className	string	✖	undefined	A CSS class to apply to the poll container
CustomTitle	({ title }: { title?: string }) => JSX.Element	✖	undefined	A custom component to render the title of the poll
CustomFooter	({ totalVotes }: { totalVotes: number }) => JSX.Element	✖	undefined	A custom component to render the footer of the poll
CustomOption	({ item, onClick }: { item: option, onClick: () => void }) => JSX.Element	✖	undefined	A custom component to render an option
CustomOptionSelected	({ item, percentVotes, isSelected }: { item: option, percentVotes: number, isSelected: boolean }) => JSX.Element	✖	undefined	A custom component to render a selected option