react-volatile

Chaos engineering for React applications. Inject controlled failures into hooks, components, and async operations during development and testing.

Packages

Package	Description
@react-volatile/core	Core chaos engine (framework-agnostic)
@react-volatile/react	React hooks, provider, and devtools
@react-volatile/babel-plugin	Automatic hook transformation

Installation

npm install @react-volatile/react

yarn add @react-volatile/react

pnpm add @react-volatile/react

The @react-volatile/core package is included as a dependency. For the babel plugin:

npm install -D @react-volatile/babel-plugin

Quick Start

import{VolatileProvider,useVolatileState,ChaosPanel}from'@react-volatile/react';functionApp(){return(<VolatileProviderconfig={{chaos: {defaultProbability: 0.3}}}><Counter/><ChaosPanel/></VolatileProvider>);}functionCounter(){const[count,setCount]=useVolatileState(0,{name: 'count',component: 'Counter',failures: ['delay','error','corrupt'],});return<buttononClick={()=>setCount(c=>c+1)}>{count}</button>;}

Available Hooks

• useVolatileState - wraps useState
• useVolatileEffect / useVolatileLayoutEffect - wraps useEffect / useLayoutEffect
• useVolatileReducer - wraps useReducer
• useVolatileMemo - wraps useMemo
• useVolatileCallback - wraps useCallback
• useVolatileAsync - wraps async functions with loading/error state
• useChaosTrigger - manual chaos control

Babel Plugin

Automatically transform React hooks to volatile equivalents:

{
"plugins": [["@react-volatile/babel-plugin", { "mode": "all" }]]
}

License

MIT