umijs / Plugin Model
This is the model plugin for umijs-v2, latest version please check ->
Stars: ✭ 34
Programming Languages
typescript
32286 projects
@umijs/plugin-model
Data flow solution based on hooks and umi plugin.
Install
# or yarn
$ npm install @umijs/plugin-model --save
Usage
Getting started in 3 steps.
.umirc.js
1. Configure in export default {
plugins: [['@umijs/plugin-model', options]],
};
src/models
2. Add model file in // src/models/count.ts
import { useState } from 'react';
export default () => {
const [count, setCount] = useState(0);
const increment = () => setCount(c => c + 1);
const decrement = () => setCount(c => c - 1);
return { count, increment, decrement };
};
3. Use it in your React Component or other models
import React from 'react';
import { useModel } from 'umi';
export default () => {
const { count } = useModel('count');
return <>{count}</>;
};
Full example can find in ./example.
Plugin API
Register extra models
Add extra models in plugins.
// use custom namespace
// @@ is used for internal models
api.register('addExtraModels', () => [
{
absPath: join(paths.absTmpDirPath, 'init', 'user.tsx'),
namespace: '@@user',
},
{
absPath: join(paths.absTmpDirPath, 'init', 'access.tsx'),
namespace: '@@access',
},
]);
// use default namespace
api.register('addExtraModels', () => [
join(paths.absTmpDirPath, 'init', 'a.tsx'),
join(paths.absTmpDirPath, 'init', 'b.tsx'),
]);
LICENSE
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].