umi-plugin-unstated

umi-plugin-unstated

Based on unstated-next(https://github.com/jamiebuilds/unstated-next) umi plugin, automatically read the file to register the container. 2.x corresponds to umi 4.x, 1.x corresponds to umi 3.x version, use different version according to your requirement.

English | 简体中文

Install

Using npm:

$ npm install umi-plugin-unstated

Using yarn:

$ yarn add umi-plugin-unstated

Using pnpm:

$ pnpm add umi-plugin-unstated

Usage

1. Add the following configuration to the config file generated by umi

// in umi config file
export default defineConfig({
  unstated: {
    /**
     * global: boolean | string[]
     * 1. If the value is true, it will register all default exports of all legal files under uModels to the global (not recommended)
     * 2. If the value is sting[], it will register the ones present in the list to the global, and the user will handle the rest (better performance)
     * 3. All legal files of uModels are registered as Container and added under umi, exporting the key as uModels (import { uModels } from 'umi')
     */
    global: ['global'],
    /**
     * Retrieve the name of the directory under src
     */
    folder: 'uModels',
    /**
     * Debug mode, more output information
     */
    debug: true,
  },
});

2. Create a new uModels folder under src and add the file global.tsx.

import { useState } from 'react';

export default function useGlobal() {
  const [global] = useState('global');

  return {
    global,
  };
}

3. Use it on the page. If the model is registered globally, you can use it directly as follows

import React from 'react';
import { uModels } from 'umi';

const App = () => {
  const { global } = uModels.global.useContainer();
  return <div>{global}</div>;
};

4. In the page. If the model is not globally registered, use the following

// src/uModels/example.tsx
import { useState } from 'react'

export default function useExample() {
  const [exampleState] = useState('example')

  return {
    exampleState,
  }
}

// MyComponent.tsx
import React from 'react';
import { uModels } from 'umi';

const ChildComponent = () => {
  const { exampleState } = uModels.example.useContainer();
  return (
    <div>
      child: {exampleState}
    </div>
  )
}
const MyComponent = () => {
  const { exampleState } = uModels.example.useContainer();
  return (
    <div>
      {exampleState}
      <ChildComponent/>
    </div>
  )
}

export default () => uModels.example.wrapProvider(<MyComponent/>)