0.6.4 • Published 6 months ago
@graph-state/react v0.6.4
@graph-state/react
Bindings for react apps.
Installation
npm i @graph-state/core @graph-state/react
or
yarn add @graph-state/core @graph-state/react
Get started
import { createState } from '@graph-state/core';
export const graphState = createState({
initialState: {
version: 1,
user: {
_type: 'User',
_id: 'id',
age: 23
}
}
});
// App.tsx
import { useGraph } from '@graph-state/react';
const App = () => {
const [state, updateState] = useGraph(graphState)
const [user, updateUser] = useGraph(graphState, 'User:id')
return <div>
<h2>Version: {state.version}</h2>
<h2>Age: {user.age}</h2>
<button onClick={() => updateUser({age: Math.random() * 100})}>Update age</button>
</div>
}
useGraph(graphState, entity)
A React hook that returns a tuple [value, setter]
, similar to the useState
React hook.
Parameters
- graphState: Instance of graph manager state.
- entity: The key of the graph entity that we subscribe and mutate.
Returns
useGraph
returns an array with exactly two values:
- The current value of the graph in the state.
- The set function that lets you update the value to a different value and trigger a re-render.
useGraphFields
Hook return array links of types
Parameters
- graphState: Instance of graph manager state.
- entityType: The type of entity. Example: User
Returns
useGraphFields
returns an array links of type
useGraphStack
Hook return array links of types
Parameters
- graphState: Instance of graph manager state.
- entities: Array of links.
Returns
useGraphStack
returns an array of graphs.
// App.tsx
import { useGraphFields, useGraphStack } from '@graph-state/react';
const App = () => {
const allUserLinks = useGraphFields(graphState, 'User') // [User:id]
const users = useGraphStack(graphState, allUserLinks)
return <div>
<h2>Ages:</h2>
<ul>
{users.map(user => <li>{user.age}</li>)}
</ul>
</div>
}
GraphValue
Helper component for declarative reactions.
import { useGraph, GraphValue } from '@graph-state/react';
import { graphState } from './App'
const App = () => <div>
<GraphValue graphState={graphState} field='User:id'>
{(user, updateUser) =>
<>
<h2>Age: {user.age}</h2>
<button onClick={() => updateUser({ age: Math.random() * 100 })}>Update age</button>
</>
}
</GraphValue>
</div>
GraphValues
Helper component for get declarative graphs.
import { useGraphFields, useGraphStack, GraphValues } from '@graph-state/react';
import { graphState } from './App'
const App = () => {
const allUserLinks = useGraphFields(graphState, 'User') // [User:id]
return <div>
<h2>Ages:</h2>
<ul>
<GraphValues graphState={graphState} fields={allUserLinks}>
{(users) => users.map(user => <li>{user.age}</li>)}
</GraphValues>
</ul>
</div>
}