SPFx React Toolkit

> A comprehensive React runtime and hooks library for SharePoint Framework (SPFx) with 35+ type-safe hooks. Simplifies SPFx development with instance-scoped state isolation and ergonomic hooks API across WebParts, Extensions, and Command Sets.

!SPFx React Toolkit

---

Overview

SPFx React Toolkit is a production-ready library that simplifies SharePoint Framework development by providing a unified React context provider and a comprehensive collection of strongly-typed hooks.

Built on Jotai atomic state management, it delivers per-instance state isolation, automatic synchronization, and an ergonomic React Hooks API that works across all SPFx component types.

$3

| Benefit | Description |
|---------|-------------|
| 💪 Type-Safe | Full TypeScript support with zero any usage |
| ⚡ Optimized | Jotai atomic state with per-instance scoping (~3KB) |
| 🔄 Auto-Sync | Bidirectional synchronization between React and SPFx |
| 🎨 Universal | Works with WebParts, Application Customizers, Field Customizers, and Command Sets |
| 📦 Modular | Tree-shakeable, minimal bundle impact |

$3

- ✅ 35+ React Hooks — Comprehensive API surface for all SPFx capabilities
- ✅ Instance Isolation — State scoped per SPFx instance (multi-instance support)
- ✅ PnPjs Integration — Optional hooks for PnPjs v4 with type-safe filters
- ✅ Cross-Platform — Teams, SharePoint, and Local Workbench support

---

Quick Start

$3

``bash
npm install @apvee/spfx-react-toolkit
`

$3

`typescript
// In your WebPart
import { SPFxWebPartProvider } from '@apvee/spfx-react-toolkit';

public render(): void {
const element = (



);
ReactDom.render(element, this.domElement);
}

// In your component
import { useSPFxProperties, useSPFxUserInfo } from '@apvee/spfx-react-toolkit';

const MyComponent: React.FC = () => {
const { properties } = useSPFxProperties();
const { displayName } = useSPFxUserInfo();

return

;
};
``

---

📚 Documentation

For complete documentation including:
- Installation & configuration
- All 4 provider components
- Complete hooks API reference (35+ hooks)
- Code examples and best practices

➡️ View Full Documentation

---

Requirements

| Requirement | Version |
|-------------|---------|
| Node.js | 22.x |
| SPFx | 1.18.0+ |
| React | 17.x |
| TypeScript | 5.3+ |

---

License

MIT — See LICENSE for details.

---

Links

- 📖 Full Documentation
- 📦 NPM Package
- 🐛 Issues

---

Made with ❤️ by Apvee Solutions