react-vivy
React bindings for Vivy based on react-redux. It exports all components and hooks from react-redux, and also exports the custom hooks for Vivy.
Docs
Installation
Using npm:
$ npm install vivy react-vivyExamples
Examples in repository
$ cd ./examples/[EXAMPLE_NAME]
$ npm run startExample names:
Complete and real project example
Documentation
Basic usage
import React from 'react';
// Import hook "useModel"
import {useModel} from 'react-vivy';
const App = () => {
// Get model state and actions/reducers using hook "useModel".
const [modelState, modelActions] = useModel('YOUR_MODEL_NAME_SPACE');
// "useModel" can also accept a model as an argument.
// import model from 'path_to_your_model';
// const [modelState, modelActions] = useModel(model);
// "useModel" can also accept a function as an argument.
// const [modelState, modelActions] = useModel(state => state.your_model_name_space);
// Get some value from modelState.
const {value} = modelState;
// Get some actions or reducers from modelActions.
const {updateValue} = modelActions;
return (
<input value={value}
onChange={e => updateValue({value: e.target.value})}/>
);
};
export default App;Hooks
useModel
- Get model by model name space
import {useModel} from 'react-vivy';
// Get model state, actions and reducers
const [modelState, modelActions] = useModel('YOUR_MODEL_NAME_SPACE');- Get model by model
import {useModel} from 'react-vivy';
import model from 'path_to_your_model';
// Get model state, actions and reducers
const [modelState, modelActions] = useModel(model);- Get model by callback function
import {useModel} from 'react-vivy';
// Get model state, actions and reducers
const [modelState, modelActions] = useModel(state => state.your_model_name_space);useStoreState
import {useStoreState} from 'react-vivy';
// Get store state
const storeState = useStoreState();useModelState
- Get model state by model name space
import {useModelState} from 'react-vivy';
// Get model state
const modelState = useModelState('YOUR_MODEL_NAME_SPACE');- Get model state by model
import {useModelState} from 'react-vivy';
import model from 'path_to_your_model';
// Get model state
const modelState = useModelState(model);- Get model state by callback function
import {useModelState} from 'react-vivy';
// Get model state
const modelState = useModelState(state => state.your_model_name_space);useModelActions
- Get model actions by model name space
import {useModelActions} from 'react-vivy';
// Get model actions and reducers
const modelActions = useModelActions('YOUR_MODEL_NAME_SPACE');- Get model actions by model
import {useModelActions} from 'react-vivy';
import model from 'path_to_your_model';
// Get model actions and reducers
const modelActions = useModelActions(model);- Get model actions by callback function
import {useModelActions} from 'react-vivy';
// Get model actions and reducers
const modelActions = useModelActions(state => state.your_model_name_space);useGlobalReducers
import {useGlobalReducers} from 'react-vivy';
// Get all global reducers
const globalReducers = useGlobalReducers();