@crudel/client

Crudel

React CRUD hooks built on top of swr.

Getting started

Installing

Frist, you need to install some required packages

npm install react swr axios

yarn add react swr axios

Then, you can install the crudel package

npm install @crudel/client

yarn add @crudel/client

Usage

You can get your data with the useCrudel hook

import { useCrudel } from "@crudel/client"

export default Projects() => {
    const { data, error, loading, remove } = useCrudel("/api/projects");

    if (error) return <div>failed to load</div>
    if (loading) return <div>loading...</div>
    if (!data) return <div>no data</div>

    return (
    <div>
        <p>Projects: {data.map(p => `${p.name}, `)}</p>
        <button onClick={() => remove(data[0].id)}>Delete</button>
    </div>
    )
}

If you only want to modify data without fetching, you can use custom functions

import { create } from "@crudel/client"

export default Projects() => {

    return (
    <div>
        <p>Projects</p>
        <button onClick={() => create("/api/projects", { name: "New Project" })}>Add Project</button>
    </div>
    )
}