A set of React components and utilities for Directus Headless CMS.
Install this library along with @directus/sdk
:
npm install react-directus @directus/sdk
The <DirectusProvider>
component makes the Directus SDK available to any nested components that need to access it. Assuming that the <App />
component is the root-level component:
import { App } from './App';
import { DirectusProvider } from 'react-directus';
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<DirectusProvider apiUrl="https://api.example.com">
<App />
</DirectusProvider>,
document.getElementById('root')
);
You can optionally pass an apiOptions
object to the provider, it will be passed to the client options
.
After adding the provider, you can access the configured client anywhere in the app, using the useDirectus
hook:
import React, { useEffect, useState } from 'react';
import { useDirectus } from 'directus-react'
export const TodoList = () => {
// Get the Directus SDK object
const { directus } = useDirectus();
const [todos, setTodos] = useState([]);
useEffect(() => {
const fetchTodos = async () => {
const todos = (await directus.items('todos').readMany()).data;
setTodos(todos);
};
fetchTodos();
}, [directus]);
return todos.map(item => <TodoItem key={item.id} item={item} />);
};
The hook exports also the <DirectusAsset>
and <DirectusImage>
components, for easy access to API assets. They are configured for using the apiUrl
specified in the provider.
These components, when imported from react-directus
directly (i.e. not using the hook), can be used in a "standalone" way, meaning that they are not bound to the apiUrl
specified in the provider. In that case, they both accept an apiUrl
prop.
Computes the URL of the given resource asset
, rendering it using the render
prop:
asset
: the asset representing the resource (string
orobject
with anid
property)render
: a function (which receive an object with theurl
property) that should return the component to renderdownload
: force browser to download the asset (force theContent-Disposition
header)
import React from 'react';
import { useDirectus } from 'directus-react'
export const TodoItem = ({ item }) => {
const { DirectusAsset } = useDirectus();
return (
<div>
<h1>Todo #{item.id}</h1>
<DirectusAsset asset={item.attachment}
download={true}
render={({ asset, url }) => <a href={url}>{asset.filename_download}</a>} />
</div>
);
};
Computes the URL of the given resource asset
, rendering it using the render
prop:
asset
: the asset representing the resource (string
orobject
with anid
property)render
: a function (which receive an object with theurl
property) that should return the component to renderfit
: fit of the thumbnail while always preserving the aspect ratio, can be any of the following options:cover
,contain
,inside
oroutside
height
: height of the thumbnail in pixelsquality
: quality of the thumbnail (1
to100
)width
: width of the thumbnail in pixels
import React from 'react';
import { useDirectus } from 'directus-react'
export const TodoItem = ({ item }) => {
const { DirectusImage } = useDirectus();
return (
<div>
<DirectusImage asset={item.image}
fit="cover" quality="75"
render={({ asset, url }) => <img src={url} alt={asset.title} />} />
<h1>Todo #{item.id}</h1>
</div>
);
};
New features and bugfix are always welcome! In order to contribute to this project, follow a few easy steps:
- Fork this repository, clone it on your machine and run
npm install
- Open your local repository with Visual Studio Code and install all the suggested extensions
- Create a branch
my-awesome-feature
and commit to it - Run
npm run lint
andnpm run build
and verify that they complete without errors - Push
my-awesome-feature
branch to GitHub and open a pull request