React Directus

Overview

This article provides an overview and installation guide for a library that works with the Directus headless CMS. It explains how to install the library and provides information on its key features, including the DirectusProvider component, useDirectus hook, and DirectusFile component. The article also mentions that the library is not currently compatible with Directus SDK version 11, but future support is in progress.

Features

• DirectusProvider: Makes the Directus JavaScript SDK available to nested components, allowing them to access it. Accepts props such as the Directus API URL and options.
• useDirectus: A hook that provides access to the configured Directus client anywhere in the app. It offers methods for working with the Directus Authentication API, including login and logout functionality.
• DirectusFile: A component for working with Directus files. It is pre-configured to use the API URL and access token specified in the provider. It can also be used in a standalone way by providing custom API URL and access token props.

Installation

To install the library, follow these steps:

1. Install the library along with the “@directus/sdk” package (version 10 or below).
2. Add the <DirectusProvider> component to make the Directus JavaScript SDK available to nested components. Set the “apiUrl” prop to the URL of your Directus API, and optionally provide other props such as “options”, “autoLogin”, and “onAutoLoginError”.
3. Use the “useDirectus” hook to access the configured client anywhere in the app. This hook provides methods for working with the Directus Authentication API, and also gives access to the current user object and authentication state.
4. Optionally, use the <DirectusFile> component to work with Directus files. It is pre-configured to use the API URL and access token from the provider, but can also accept custom props for standalone usage.

Summary

This article introduces a library for working with the Directus headless CMS. It provides key features such as the DirectusProvider component for making the Directus JavaScript SDK available to nested components, the useDirectus hook for accessing the configured Directus client, and the DirectusFile component for working with Directus files. The installation guide explains how to set up the library and its components. While it is not currently compatible with Directus SDK version 11, support for these versions is being developed.