@enymo/react-resource-hook v4.1.2
React Resource Hook
React Hook for interacting with REST APIs.
Installation
The library may be installed from npm using
npm i @enymo/react-resource-hook
Features
- Access REST resources using a simple, laravel-inspired naming scheme and a React-friendly declarative syntax
- Create, update and destroy resources with easy-to-use methods
- Upload files without needing to manually convert you payload to FormData
- Easily incorporate WebSockets to keep your frontend up-to-date as data is changed by other processes.
Usage
In order to use the useResource
hook in your components, you app has to be wrapped with the ResourceProvider
to configure the hook
import React from "react";
import { RouteFunction, ResourceProvider } from "@enymo/react-resource-hook";
import route from "ziggy-js";
import axios from "axios";
function App() {
return (
<ResourceProvider value={{axios: axios, routeFunction: route as RouteFunction, reactNative: false}}>
{/* Your app here */}
</ResourceProvider>
)
}
NOTE If you're using ziggy-js for the route function: As of 06/12/2023, the typing for ziggy-js is incorrect, but it's implementation isn't. Because of this, route
has to be cast to RouteFunction
to be used with the resource hook.
You can then access resource in your components like this:
import useResource from "@enymo/react-resource-hook";
import React from "react";
export default function Component() {
const [items, {loading, store, update, destroy, extra, refresh}] = useResource<{
id: number,
text: string
}>("my-resource");
if (loading) {
return null;
}
return (
<div>
{items.map(({id, text}) => (
<button
key={id}
onClick={() => update(id, {
text: "Updated!"
})}
>{text}</button>
))}
</div>
)
}
Configuration
The ResourceProvider
allows to configure the behavior of the resource hook for all components placed within. The following options may be passed to the value
-prop.
| Option | Description |
|---------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| axios | You can set a custom axios instance to be used for all requests the hook makes.If you don't need this, you can simply pass the global axios import |
| routeFunction | The resource hook was developed to be used with Laravels resource routes and ziggy-js,but any function with the same signature as ziggy-js' 'route' may be used |
| reactNative | Should be set to true when using this library in a react native project.This slightly alters the behavior of the hooks form data converter (see below) to accountfor react natives unique way of handling file uploads |
Resource naming and routing
WIP
Options
WIP (jsdoc available)
7 days ago
22 days ago
24 days ago
24 days ago
24 days ago
24 days ago
24 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
8 months ago
8 months ago
8 months ago
6 months ago
9 months ago
10 months ago
6 months ago
9 months ago
10 months ago
6 months ago
9 months ago
10 months ago
6 months ago
10 months ago
6 months ago
8 months ago
6 months ago
8 months ago
10 months ago
6 months ago
9 months ago
10 months ago
6 months ago
9 months ago
10 months ago
7 months ago
7 months ago
6 months ago
11 months ago
11 months ago