npm i react-raffle-picker

React like you just won.

000000000000000000000

The raffle picker your UI deserves.

~3.4 KB gzip·headless·React 18+·MIT

What's inside

One root, many faces.

A compound component you compose, not a widget you configure. Pick the pieces you need, drop them where you want them, style them like any other DOM.

Headless

composable

Zero styles, full DOM control. Wrap pieces in your own card, modal, paragraph.

Numbers or items

two modes

Roll a range like 1–100 or cycle through your own list of names, prizes, or words.

4 animations

css-driven

roll, fade, blur, reel — bound to your tick interval, no cross-frame tearing.

Performant ticks

no re-render

Tick updates write textContent via refs. No React render per tick. Smooth on potatoes.

Inertia

opt-in

Soft start, soft stop. The reel ramps in and out for a more tactile feel.

Countdown ring

auto-freeze

Auto-freeze after N seconds with a built-in SVG ring or your own render-prop.

Slot machine

Independent multi-reel slots. Each reel ticks on its own and stops with a stagger.

TypeScript

d.ts

Fully typed. Discriminated phase union. No any in the public API.

30 seconds

Drop it in.

Compose the root with the pieces you need. Style them with your own CSS. Done.

Install

npm install react-raffle-picker

Compose

// React like you just won.
import { RafflePick } from 'react-raffle-picker'

export function Giveaway() {
  return (
    <RafflePick min={1} max={999} inertia onSelect={(v) => alert(v)}>
      <RafflePick.Value animation="roll" className="text-6xl" />
      <RafflePick.Button startLabel="Pick" stopLabel="Stop" />
    </RafflePick>
  )
}