React components and hooks for integrating with Directus Headless CMS, including authentication and file handling.
react-directus is a React library that provides components and utilities for integrating with Directus, a headless CMS. It simplifies connecting React applications to Directus APIs by offering a provider, hooks for data and authentication, and a component for handling files. The library reduces boilerplate code and streamlines frontend development when using Directus as a backend.
Frontend developers building React applications that use Directus as a headless CMS, especially those needing authentication, data fetching, and asset management.
Developers choose react-directus because it offers a declarative, React-centric API for Directus integration, with built-in authentication handling and file components, saving time and reducing complexity compared to manually implementing Directus SDK calls.
A set of React components and utilities for Directus Headless CMS
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
The DirectusProvider and useDirectus hook simplify SDK setup and data fetching, reducing boilerplate as shown in the TodoList example.
useDirectusAuth hook handles login, logout, and user state, streamlining auth flows without manual token handling.
DirectusFile component supports Directus image transformations and downloads, making asset display and manipulation easier with SEO features.
Works with React Native via a localstorage-polyfill, allowing code reuse across web and mobile platforms.
Only supports @directus/sdk version 10 or below, with version 11 unsupported, which may block access to newer Directus features.
Currently offers only one component (DirectusFile), lacking broader UI helpers for common CMS-driven interfaces.
Requires a localstorage-polyfill for React Native, which is a temporary solution and not ideal for secure or production-ready storage.