Quadratic-Vote
[](https://github.com/civicbase/quadratic-vote/blob/main/LICENSE)
[](https://www.npmjs.com/package/quadratic-vote)
[](https://www.npmjs.com/package/quadratic-vote)
[](https://bundlephobia.com/package/quadratic-vote)
**Quadratic-Vote** is a modern React component library for implementing quadratic voting in web applications with smooth animations. Quadratic voting allows participants to allocate votes to express the intensity of their preferences, with the cost increasing quadratically (1 vote = 1 credit, 2 votes = 4 credits, 3 votes = 9 credits, etc.).
## β¨ Features
- π¨ **Fully Customizable** - Colors, sizes, and layouts
- π¬ **Smooth Animations** - Credit circles fly from pool to diamonds with React Portal
- π± **Responsive** - Works on all screen sizes
- π― **TypeScript** - Full type safety and IntelliSense support
- βΏ **Accessible** - Semantic HTML and ARIA labels
- π **Zero Dependencies** - Only requires React and React DOM
- β‘ **Lightweight** - Minimal bundle size impact
## π¦ Installation
```bash
npm install quadratic-vote
```
If you use `
{/* Credit Pool */}
{/* Questions */}
{questions.map((q) => (
{q.question}
vote(q.id, 1)} disabled={q.isDisabledUp}>
Vote Yes
vote(q.id, -1)} disabled={q.isDisabledDown}>
Vote No
))}
Reset
)
}
```
### Usage Option 2: Named Exports
```tsx
import {
QuadraticVoteProvider,
Pool,
Diamond,
useQuadraticVote,
type Question,
} from 'quadratic-vote'
function VotingInterface() {
const { questions, vote, reset } = useQuadraticVote()
return (
{questions.map((q) => (
{q.question}
vote(q.id, 1)} disabled={q.isDisabledUp}>
Vote Yes
))}
)
}
function App() {
const questions: Question[] = [{ question: 'Should we implement feature X?', vote: 0, id: 0 }]
return (
)
}
```
## π API Reference
### ``
The context provider that wraps your voting interface.
| Prop | Type | Required | Description |
| ----------- | ------------ | -------- | -------------------------------------------- |
| `credits` | `number` | β
| Total voting credits (must be between 4-225) |
| `questions` | `Question[]` | β
| Array of questions to vote on |
| `children` | `ReactNode` | β
| Your voting interface components |
### ``
Displays the credit pool showing available and used credits with animated transitions.
| Prop | Type | Default | Description |
| --------------- | --------- | --------- | ---------------------------------- |
| `columns` | `number` | `5` | Number of columns in the pool grid |
| `circleRadius` | `number` | `4` | Radius of each credit circle |
| `circleSpacing` | `number` | `4` | Spacing between circles |
| `reverse` | `boolean` | `false` | Reverse the fill direction |
| `creditColor` | `string` | `'black'` | Color of used credits |
| `circleColor` | `string` | `'grey'` | Color of available credits |
### ``
Compact alternative to `` designed for mobile: a gooey βliquid loaderβ style pool (based on the referenced CodePen), plus a single pool anchor so credits always exit/return from the same spot.
```tsx
`
Displays a diamond-shaped vote indicator for a question.
| Prop | Type | Default | Description |
| --------------- | -------- | ----------- | ----------------------------------------------- |
| `id` | `number` | β
Required | Question ID (must match a question in Provider) |
| `neutralColor` | `string` | `'#A9A9A9'` | Color when no vote is cast |
| `positiveColor` | `string` | `'#00FF00'` | Color for positive votes |
| `negativeColor` | `string` | `'#FF0000'` | Color for negative votes |
| `circleRadius` | `number` | `4` | Radius of diamond circles |
### `useQuadraticVote()` Hook
Access voting state and actions.
```tsx
const {
questions, // Current question state with vote counts
credits, // Total credits
availableCredits, // Remaining credits
vote, // Function to cast a vote: (id: number, amount: number) => void
reset, // Function to reset all votes: () => void
} = useQuadraticVote()
```
### `Question` Type
```tsx
interface Question {
id: number
vote: number
isDisabledUp?: boolean
isDisabledDown?: boolean
[key: string]: any // Additional custom properties
}
```
## π¨ Customization Examples
### Custom Colors
```tsx
