react-raffle-picker 0.3.1 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +22 -14
  2. package/package.json +19 -9
package/README.md CHANGED
@@ -3,7 +3,7 @@
3
3
 
4
4
  <h1>react-raffle-picker</h1>
5
5
 
6
- <p><strong>React like you just won. The raffle picker your UI deserves.</strong></p>
6
+ <p><strong>Random winner picker for React.</strong><br/>Giveaways, raffles, prize draws and slot-machine UIs — headless, typed, zero dependencies.</p>
7
7
 
8
8
  <p>
9
9
  <a href="https://react-raffle-one.vercel.app/">Live demo</a>
@@ -27,7 +27,16 @@
27
27
  </p>
28
28
  </div>
29
29
 
30
- A headless, composable React component for giveaways, raffles, and slot-machine UIs. Cycles numbers or names with smooth animations and freezes on a winner. Performant on slow devices — high-frequency tick updates bypass React.
30
+ Pick a random winner in React. `react-raffle-picker` cycles a list of names or a number range,
31
+ freezes on a winner, and never draws the same one twice — with slot-machine reels, four CSS
32
+ animations and countdown auto-freeze.
33
+
34
+ It ships as a **headless compound component**: no layout opinions, no style props soup, you
35
+ bring your own CSS. Performant on slow devices — high-frequency tick updates bypass React and
36
+ write to the DOM via refs.
37
+
38
+ **Use it for:** giveaway winners on stream · prize draws · random name picker · standup speaking
39
+ order · random number roller · slot-machine and lottery UIs.
31
40
 
32
41
  ```bash
33
42
  npm install react-raffle-picker
@@ -71,7 +80,6 @@ This means:
71
80
 
72
81
  ```tsx
73
82
  import { RafflePick } from 'react-raffle-picker'
74
-
75
83
  ;<RafflePick min={1} max={100} interval={100} inertia onSelect={(v) => console.log(v)}>
76
84
  <RafflePick.Value animation="roll" className="my-value" />
77
85
  <RafflePick.Button startLabel="Pick" stopLabel="Stop" />
@@ -107,11 +115,11 @@ Provides context. Renders an optional wrapper element (`as` prop, default `'div'
107
115
  | `random` | `boolean` | `true` | Random pick vs sequential. |
108
116
  | `inertia` | `boolean` | `false` | Soft start / soft stop ramp. |
109
117
  | `autoStart` | `boolean` | `true` | Begin cycling on mount. |
110
- | `noRepeat` | `boolean` | `true` | Exclude previously frozen values from later rounds — no duplicate winners across sequential draws in the same mounted instance. Set `false` to allow repeats. |
118
+ | `noRepeat` | `boolean` | `true` | Exclude previously frozen values from later rounds — no duplicate winners across sequential draws in the same mounted instance. Set `false` to allow repeats. |
111
119
  | `initialValue` | `number \| string` | — | Starting display before first run. Number for `min`/`max` mode, string for `items` mode. For `<Slots>`, each character seeds the corresponding reel. |
112
120
  | `finalValue` | `number \| string` | — | Forces settle to land on this value. Cycle still appears random; only final freeze is rigged. For `<Slots>`, each character is the final char of the corresponding reel. |
113
121
  | `onSelect` | `(value) => void` | — | Fires once per round on freeze. |
114
- | `onExhausted` | `() => void` | — | Fires when `start()` is called but `noRepeat` has already drawn every candidate. |
122
+ | `onExhausted` | `() => void` | — | Fires when `start()` is called but `noRepeat` has already drawn every candidate. |
115
123
  | `as` | `ElementType` | `'div'` | Wrapper tag. |
116
124
  | `className` | `string` | — | Wrapper class. |
117
125
  | `style` | `CSSProperties` | — | Wrapper style. |
@@ -136,15 +144,15 @@ Multiple `Value` instances inside one root are supported — all subscribe to th
136
144
 
137
145
  Toggles start / freeze based on phase. Disabled during settling.
138
146
 
139
- | Prop | Type | Notes |
140
- | ------------ | --------------- | ------------------------------------------------ |
141
- | `startLabel` | `ReactNode` | Shown in `idle` / `frozen` (click starts). |
142
- | `stopLabel` | `ReactNode` | Shown in `running` / `starting` (click stops). |
143
- | `waitLabel` | `ReactNode` | Shown in `settling` (button disabled). |
144
- | `children` | `ReactNode` | Fallback label when state-specific label absent. |
147
+ | Prop | Type | Notes |
148
+ | ------------ | --------------- | --------------------------------------------------------------- |
149
+ | `startLabel` | `ReactNode` | Shown in `idle` / `frozen` (click starts). |
150
+ | `stopLabel` | `ReactNode` | Shown in `running` / `starting` (click stops). |
151
+ | `waitLabel` | `ReactNode` | Shown in `settling` (button disabled). |
152
+ | `children` | `ReactNode` | Fallback label when state-specific label absent. |
145
153
  | `disabled` | `boolean` | External disable, on top of the auto-disable during `settling`. |
146
- | `className` | `string` | — |
147
- | `style` | `CSSProperties` | — |
154
+ | `className` | `string` | — |
155
+ | `style` | `CSSProperties` | — |
148
156
 
149
157
  ### `<RafflePick.Countdown>`
150
158
 
@@ -260,7 +268,7 @@ function Giveaway() {
260
268
  ## Accessibility
261
269
 
262
270
  - `<RafflePick.Value>` cycles are visual-only (`aria-hidden`) — high-frequency tick
263
- updates are not announced. The frozen result *is* announced once per round via a
271
+ updates are not announced. The frozen result _is_ announced once per round via a
264
272
  hidden `aria-live="polite"` region.
265
273
  - `<RafflePick.Countdown>`'s ring/label are `aria-hidden`; a one-time sr-only
266
274
  announcement fires when the countdown starts. The result itself is still
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-raffle-picker",
3
- "version": "0.3.1",
4
- "description": "Headless React raffle picker for giveaways, winner draws, countdowns, and slot-machine UIs.",
3
+ "version": "0.3.2",
4
+ "description": "React random picker: draw a random winner or number with slot-machine, reel and countdown animations. Headless, typed, zero-dependency.",
5
5
  "type": "module",
6
6
  "publishConfig": {
7
7
  "access": "public",
@@ -61,18 +61,28 @@
61
61
  },
62
62
  "keywords": [
63
63
  "react",
64
- "raffle",
65
- "giveaway",
66
- "winner",
67
- "picker",
68
64
  "random-picker",
69
- "draw",
65
+ "random-name-picker",
66
+ "name-picker",
67
+ "winner-picker",
68
+ "random-winner",
69
+ "giveaway",
70
+ "giveaway-picker",
71
+ "prize-draw",
72
+ "raffle",
73
+ "raffle-picker",
70
74
  "lottery",
71
75
  "slot-machine",
76
+ "slot-machine-react",
77
+ "reel",
78
+ "number-picker",
79
+ "random-number",
72
80
  "countdown",
73
81
  "headless",
82
+ "headless-ui",
74
83
  "compound-components",
75
- "react-component"
84
+ "react-component",
85
+ "typescript"
76
86
  ],
77
87
  "author": "Kirilinsky (https://github.com/kirilinsky)",
78
88
  "license": "MIT",
@@ -115,4 +125,4 @@
115
125
  "volta": {
116
126
  "node": "22.12.0"
117
127
  }
118
- }
128
+ }