React hooks and DevTools component used to visualize tree.
npm install @btree/react
This package contains React hooks and DevTools component used to visualize tree.
``sh`
npm i @btree/core @bree/react
Initialize tree instance and setup connection with React state.
- options.tree: an instance of root nodeoptions.initialState
- : Initial state passed to tree
`tsx
import {nodes} from '@btree/core'
import {useTree} from '@btree/react'
const tree = nodes.root('AppTree', () =>
nodes.sequence([
nodes.condition('Is logout action', (state, props) => props?.action === 'logout'),
nodes.action('Do logout', (state) => {
state.username = null
})
])
)
const initialState = {
username: 'john'
}
const App = () => {
const {state} = useTree({tree, initialState})
return (
$3
Component used to visualize BehaviorTree.
`tsx
const App = () => (
)
`Or if you want to use
useTree in App component:`tsx
const App = () => {
const tree = useTree({tree: AppBehavior}) return (
)
}
`$3
Function used to create React Context for given tree.
`tsx
const AppBehavior = nodes.root('AppBehavior', () =>
nodes.selector([
// ...
])
)const {useTreeContext, TreeContext} = createTreeContext(AppBehavior)
const MyComponent = () => {
const tree = useTreeContext()
// You can access tree.state in nested component
}
const App = () => {
const tree = useTree({tree: AppBehavior})
return (
)
}
``