react-polls

Customizable poll component for React

react-polls is a poll component for React which can be easily used and customizable adding your question and possible answers. It uses browser Local Storage to save the user vote and block multiples votes.

Demo

If you want to test and view react-polls, go to the online demo by clicking here. The demo source code is available within the example directory.

Install

Use the package manager to install react-polls dependency to your project.

NPM

npm install --save react-polls

Yarn

yarn add react-polls

Usage

After installation, import the Poll component from react-polls dependency and start using it by passing the required props: question, answer and onVote. See User Guide section for more information about props.

import React, { Component } from 'react';
import Poll from 'react-polls';

// Declaring poll question and answers
const pollQuestion = 'Is react-polls useful?'
const pollAnswers = [
  { option: 'Yes', votes: 8 },
  { option: 'No', votes: 2 }
]

class App extends Component {
  // Setting answers to state to reload the component with each vote
  state = {
    pollAnswers: [...pollAnswers]
  }

  // Handling user vote
  // Increments the votes count of answer when the user votes
  handleVote = voteAnswer => {
    const { pollAnswers } = this.state
    const newPollAnswers = pollAnswers.map(answer => {
      if (answer.option === voteAnswer) answer.votes++
      return answer
    })
    this.setState({
      pollAnswers: newPollAnswers
    })
  }

  render () {
    const { pollAnswers } = this.state
    return (
      <div>
        <Poll question={pollQuestion} answers={pollAnswers} onVote={this.handleVote} />
      </div>
    );
  }
};

This is a basic example, for complex usage, see the Demo and User Guide sections.

Customize

Poll component is able to customizable through customStyles prop, the prop receives a object with the following keys and values:

|Key|Value|Description| |---|---|---| |questionSeparator|Boolean|Enables or disables the separator between question and answers. |questionSeparatorWidth|'question' or 'poll'|Defines the width of separator based on the question or the poll. |questionBold|Boolean|Adds bold to the question font. |questionColor|Hex Color|Sets the color of question font. Must be in hex format #000000. |align|'left', 'center' or 'right'|Sets the align of question and total votes. |theme|'purple', 'red', 'blue', 'black', 'white' or 'cyan'|Sets the poll theme.

User guide

Below is listed all the props that can be passed to the Poll component:

|Prop|Description|Value| |---|---|---| |question|Defines the question that will be added to the top of the poll as title.|Type: stringExample: What's the best framework?| |answers|Defines the list of all avaible answers to the poll question and the current votes of each answer. It receives an array of objects that have option and votes properties.|Type: arrayExample: [{ option: 'React', votes: 23 }]| |onVote|Receives a callback function which will be executed when the user vote in a answer. The function receives the text answer as parameter.|Type: functionExample: voteAnswer => console.log('User voted!')| |customStyles (optional)|Sets custom styles for the Poll component. It receives a object with the following optional properties: questionSeparator questionSeparatorWidth questionBold questionColor align theme|Type: objectExample: See at examples/src/App.js| |noStorage (optional)|Disables the use of LocalStorage to save the user's vote.|Type: booleanExample: false| |vote (optional)|Receives the text answer and sets the user vote. If set, it will show the poll result. I'd recommend using this prop with noStorage prop.|Type: stringExample: React|

Contribute

If you want to contribute in react-polls, follow these steps:

• Make a fork of this repository and clone it git clone fork_url
• Run npm install and npm start to install the dependencies and start the component
• Open a new terminal tab and go to example folder and run npm start
• Do the changes and make a Pull Request

License

MIT © viniciusmeneses