react-1poll

A simple React component to make doodle-like collaborative polls.

Usage no npm install needed!

<script type="module">
  import react1poll from 'https://cdn.skypack.dev/react-1poll';
</script>

README

react-1poll component

A simple Doodle-like poll component that makes it easy for contributors to add more options. Star it on npm and on github.

Made with React.js and Material-UI. Thanks to Romain Dardour for his help!

Demo / examples of use

How to install and use

Using npm

First, install it in your project's directory:

npm install react-1poll

Then, integrate it in your javascript project:

var PollForm = require('./PollForm.jsx');
var options = [
  { name: 'Option A', defaultCheck: true },
  { name: 'Option B' },
  { name: 'Option C' }
];
function onValidSubmit(selectedItems) {
  assert.equal(selectedItems, [ 'Option A' ]);
}
ReactDOM.render(<PollForm
  options={options}
  onNewOption={console.log}
  onValidSubmit={onValidSubmit} />, appDiv);

Component API reference

Properties

  • options: an Array of Objects that accept the following fields:
    • name: (String) name of the option, seen as a checkbox.
    • checked: (Boolean) true if the checkbox is checked.
    • defaultChecked: (Boolean) true if the checkbox should be checked initially.
  • allowNewEntries: (optional boolean) set to false to hide the option entry field.
  • onNewOption: (optional) Function({ name: String, defaultChecked: Boolean }) overrides the function that adds the new option to the options state Array.
  • onSelectionChange: (optional) Function([ { name: String, checked: true } ]) passes an Array of option Objects (as in the options property), which are currently selected (i.e. have their checked field set to true).
  • labelStyle: an optional Object to override the inline-style of the Checkbox labels.
  • autoFocus: (Boolean) if set to true, the option entry field will be focused (ready to type) by default.