@zeropoll/react-ui NPM

@zeropoll/react-ui

Ready-to-use React components for integrating ZeroPoll into your application.

Built with:

React >=18
Tailwind CSS
shadcn/ui (for UI components)
@zeropoll/react
lucide-react (for icons)
react-hook-form (for form handling)

Installation

# Install the package
npm install @zeropoll/react-ui
# or
yarn add @zeropoll/react-ui
# or
pnpm add @zeropoll/react-ui
# or
bun add @zeropoll/react-ui

Setup

First, import and include the styles in your app:

import '@zeropoll/react-ui/styles.css';

Wrap your application with the ZeroPollProvider:

import { ZeroPollProvider } from '@zeropoll/react';

function App() {
	return (
		<ZeroPollProvider
			protokitGraphqlUrl="https://chain.zeropoll.xyz/graphql"
			ipfsApiUrl="https://ipfs.zeropoll.xyz"
			tickInterval={1000}
		>
			<YourApp />
		</ZeroPollProvider>
	);
}

Components

PollCard

Display a poll and allow users to vote.

import { PollCard } from '@zeropoll/react-ui';

function MyPoll() {
	return (
		<PollCard
			id="poll-id"
			encryptionKey="optional-encryption-key"
			onLoadSuccess={() => console.log('Poll loaded')}
			onLoadError={message => console.error('Load error:', message)}
			onVoteSuccess={() => console.log('Vote success')}
			onVoteError={message => console.error('Vote error:', message)}
		/>
	);
}

PollCard Props

Prop	Type	Description
id	string	The poll identifier
encryptionKey?	string	Optional encryption key for encrypted polls
className?	string	Additional CSS classes
onLoadSuccess?	() => void	Called when poll loads successfully
onLoadError?	(message: string) => void	Called when poll fails to load
onVoteSuccess?	() => void	Called when vote is successful
onVoteError?	(message: string) => void	Called when vote fails

PollFormCard

Component for creating new polls.

import { PollFormCard } from '@zeropoll/react-ui';

function CreatePoll() {
	return (
		<PollFormCard
			onSuccess={result => {
				console.log('Poll created:', result.id);
			}}
			onError={message => {
				console.error('Error:', message);
			}}
		/>
	);
}

PollFormCard Props

Prop	Type	Description
className?	string	Additional CSS classes
onSuccess?	(result: { id: string; hash: string; encryptionKey: string }) => void	Called when poll is created
onError?	(message: string) => void	Called when poll creation fails