Quadratic-Vote is a React component library for implementing quadratic voting in web applications. Quadratic voting is a voting system where participants allocate votes to express the intensity of their preferences, rather than just the direction.

Installation

To install Quadratic-Vote, run the following command in your project directory:

npm install quadratic-vote

or

yarn add quadratic-vote

Example

For a live demonstration and code examples, check out our interactive example on CodeSandbox:

Quadratic-Vote Example on CodeSandbox

This example showcases a typical implementation of the Quadratic-Vote component in a React application. It includes various questions and demonstrates the voting mechanism along with UI components such as the voting pool and diamond-shaped indicators.

Feel free to experiment with the code in the sandbox to get a better understanding of how to integrate and customize Quadratic-Vote in your own projects.

Usage

Importing

import QuadraticVote, { Question, useQuadraticVote } from "quadratic-vote";

Setting Up Your Component

Here is an example of how to set up a basic voting component using QuadraticVote:

function Container() {
  const { questions, vote, reset } = useQuadraticVote();

  // ... (component implementation)
}

function App() {
  const questions = [
    // ... (list of questions)
  ];

  return (
    <QuadraticVote.Provider credits={100} questions={questions}>
      <Container />
    </QuadraticVote.Provider>
  );
}

export default App;

Defining Questions

Define your questions in the following format:

const questions: Question[] = [
  {
    question: "Your question here?", // this is additional and not required. Can be accessed under <QuadraticVote.Provider>
    vote: 0,
    id: 0,
    // ... additional properties,
  },
  // ... more questions
];

Component Structure

The Container function demonstrates a typical setup. You can customize styles and layout as needed.

Voting and Resetting

Use the vote function to handle vote submissions and the reset function to reset votes.

Customization

You can customize the appearance and behavior of the voting components. For example, you can change the colors of the voting pool, diamonds, and buttons.

Example: https://codesandbox.io/s/quadratic-vote-nyk9nx