/mobx-react-form-devtools

DevTools for MobX React Form

Primary LanguageTypeScriptMIT LicenseMIT

MobX React Form DevTools

DevTools for MobX React Form

NPM

GitHub Workflow Status (with branch) GitHub release (latest by date) npm bundle size Codecov Coverage node GitHub license GitHub closed pull requests GitHub closed issues Downloads Downloads


Install

npm install --save mobx-react-form-devtools

Demo

MobX React Form DevTools Demo

Usage

import MobxReactFormDevTools from 'mobx-react-form-devtools';

// register forms (mobx-react-form Instances)
MobxReactFormDevTools.register({
  loginForm,
  registerForm,
  supportForm,
});

// select form to show into the devtools
MobxReactFormDevTools.select('registerForm');

// open the devtools (closed by default)
MobxReactFormDevTools.open(true);

// render the component
<MobxReactFormDevTools.UI />

Theme

// custom theme colors
MobxReactFormDevTools.theme({
  base00: '#2b303b',
  base01: '#343d46',
  base02: '#4f5b66',
  base03: '#65737e',
  base04: '#a7adba',
  base05: '#c0c5ce',
  base06: '#dfe1e8',
  base07: '#eff1f5',
  base08: '#bf616a',
  base09: '#d08770',
  base0A: '#ebcb8b',
  base0B: '#a3be8c',
  base0C: '#96b5b4',
  base0D: '#8fa1b3',
  base0E: '#b48ead',
  base0F: '#ab7967',
});

Screenshot

DevTools

Contributing

If you want to contribute to the development, do not hesitate to fork the repo and send pull requests.

And don't forget to star the repo, I will ensure more frequent updates! Thanks!