opp-react
v1.0.0-alpha.46
Published
Components and Hooks for [React](https://react.dev).
Downloads
324
Readme
opp-store
Components and Hooks for React.
Installation
Using npm:
$ npm install --save opp-react
Documentation
usePlugin
Return registered plugin with react hooks.
type usePlugin = (name: string) => Plugin['hooks'];
import { registerPlugin, start } from 'opp-core';
import { usePlugin } from 'opp-react';
const plugin = { name: 'test', hooks: {} };
registerPlugin(plugin);
start();
const Component = (props = {}) => {
usePlugin('test') === plugin.hooks;
return <div>Component</div>;
};
PluginRender
PluginRender
will render matched plugin with react lifecycle.
type Props = { id: string };
type PluginRender = ComponentType<Props>;
componentDidMount
PluginRender
will do those things:
- Create
HTMLDivElement
withid
same asprops.id
; - Use
props.id
to find plugin with sameplugin.container
; - Run
plugin.mount
with parameters: element (HTMLDivElement
), props (props
omitid
);
componentDidUpdate
PluginRender
will do those things:
- Use
props.id
to find plugin with sameplugin.container
; - Run
plugin.update
with parameters: props (props
omitid
);
componentWillUnmount
PluginRender
will do those things:
- Use
props.id
to find plugin with sameplugin.container
; - Run
plugin.unmount
with no parameters;
CreatePlugin
Create plugin with React Component.
type CreatePlugin = (Component: ComponentType) => (plugin: Plugin) => Plugin;
import { useState } from 'react';
import { PluginRender, createPlugin } from 'opp-react';
import { Input } from 'antd';
const plugin = createPlugin(Input)({
name: 'input',
container: 'input-element',
});
registerPlugin(plugin);
start();
const Component = (props = {}) => {
const [value, setValue] = useState('');
return (
<PluginRender id="input-element" value={value} onChange={setValue} />
);
};