Skip to content

Commit 99f621f

Browse files
committed
Update README with recent features since v3.1.1
Added documentation for: - Percentage-based rollouts and A/B testing feature - rolloutStableId prop for Features component - enableFor field in FeatureDescription type - Node.js 18+ requirement - Usage examples and best practices for gradual rollouts This documents the major features added in PRs #35 and #34. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 4a10333 commit 99f621f

1 file changed

Lines changed: 57 additions & 0 deletions

File tree

README.md

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,14 @@ Easy and fast way to toggle features in your project.
55
Features include:
66

77
- Toggle parts of your project dynamically or at startup
8+
- Percentage-based rollouts for gradual feature adoption and A/B testing
89
- Built in state management for active features
910
- Roll your own state manager using the minimal functional interface
1011

1112
## Installation and usage
1213

14+
**Requirements:** Node.js 18.0.0 or higher
15+
1316
To install,
1417

1518
```sh
@@ -51,6 +54,47 @@ function App(): JSX.Element {
5154
}
5255
```
5356

57+
## Percentage-based Rollouts and A/B Testing
58+
59+
React-Enable supports gradual rollouts and A/B testing through percentage-based feature flags. This allows you to enable features for a specific percentage of users.
60+
61+
```typescript
62+
import { Features, Enable } from 'react-enable';
63+
64+
// Enable the feature for 30% of users
65+
const FEATURES: FeatureDescription[] = [
66+
{ name: 'newDesign', enableFor: 0.3 } // 30% rollout
67+
];
68+
69+
function App(): JSX.Element {
70+
const userId = getUserId(); // Get a stable user identifier
71+
72+
return (
73+
<Features features={FEATURES} rolloutStableId={userId}>
74+
<Enable feature="newDesign">
75+
<NewDesign />
76+
</Enable>
77+
<Disable feature="newDesign">
78+
<OldDesign />
79+
</Disable>
80+
</Features>
81+
);
82+
}
83+
```
84+
85+
### Key Features
86+
87+
- **Deterministic Assignment**: The same user (based on `rolloutStableId`) will always see the same features, ensuring consistent user experience
88+
- **Auto-generated IDs**: If `rolloutStableId` is not provided, an ID is automatically generated and persisted to sessionStorage
89+
- **Gradual Rollouts**: Easily increase feature adoption by adjusting the `enableFor` value (0.0 to 1.0)
90+
- **A/B Testing**: Use different percentage values to test multiple feature variants
91+
92+
### Best Practices
93+
94+
- Use a stable user identifier (user ID, session ID, etc.) for `rolloutStableId` to ensure consistency across page loads
95+
- Start with small percentages (e.g., 0.05 for 5%) and gradually increase as you validate the feature
96+
- Combine with manual overrides using `ToggleFeatures` component for testing
97+
5498
## Documentation
5599

56100
### `Features` component
@@ -60,11 +104,24 @@ Provides state and context for managing a set of features.
60104
Available props:
61105

62106
- `features: FeatureDescription[]`: description of available features.
107+
- `rolloutStableId?: string`: stable identifier for percentage-based rollouts
108+
(e.g., user ID, session ID). If not provided, an ID is auto-generated
109+
and persisted to sessionStorage
63110
- `disableConsole?: boolean`: indicate the console API
64111
should not be enabled (default false)
65112
- `storage?: Storage`: where to persist
66113
overrides (default `window.sessionStorage`)
67114

115+
### `FeatureDescription` type
116+
117+
Defines a feature flag with the following properties:
118+
119+
- `name: string`: unique identifier for the feature
120+
- `defaultValue?: boolean`: whether the feature is enabled by default (default false)
121+
- `enableFor?: number`: percentage of users to enable this feature for (0.0 to 1.0).
122+
When specified, this takes precedence over `defaultValue` and uses deterministic
123+
hashing based on `rolloutStableId` to ensure consistent assignment
124+
68125
### `Enabled` and `Disabled` components
69126

70127
Render children depending on which set of features are active.

0 commit comments

Comments
 (0)