Powerful Web Application Data Storage and State Management Solution.
Powerful Web Application Data Storage and State Management Solution.
// todo.store.ts
import {ClientStore} from "client-web-storage";
interface ToDo {
name: string;
description: string;
complete: boolean;
}
// create a store providing the name and schema object
// with default values or javasctipt types
const todoStore = new ClientStore<ToDo>("todo", {
$name: String,
description: "No Description",
complete: false
});
Works with any web library or framework. Here is an example using React.
// app.tsx
import {useClientStore} from "client-web-storage/helpers/use-client-store";
import {Todo} from "./stores/todo.store";
import FlatList from "flatlist-react";
const App = () => {
const todos = useClientStore<Todo>("todo");
if(todos.processing) {
return <Spinner />
}
if(todos.error) {
return <p className="error">{error.message}</p>
}
const handleCreatItem = async () => {
await todos.createItem({
// only name is required (marked with $), the store will auto fill the other fields with defaults
name: "Go to Gym"
});
}
return (
<>
<button type="button" onClick={handleCreatItem}>create todo</button>
<FlatList list={todos.items} renderItem={renderTodo}/>
</>
)
}
npm install client-web-storage
import {Schema, ClientStore} from "client-web-storage";
<!-- use the latest version -->
<script src="https://unpkg.com/client-web-storage/client-web-storage.min.js"></script>
<!-- use a specific version -->
<script src="https://unpkg.com/[email protected]/client-web-storage.min.js"></script>
<script>
const {Schema, ClientStore} = window.CWS;
</script>