![\"NPM\"](\"https://badge.fury.io/js/react-use-controller.svg\"){kind=icon}
\n ![\"Build\"](\"https://shields-staging.herokuapp.com/npm/types/react-use-controller.svg\")
\n\n Turning plain-old classes into react super-hooks! π¦Έ\n
\n \n\n \n \n
\n Use any class as a hook based 'model-controller',
\n with values, actions, and lifecycle methods to control your components.\n
\n Controller hooks will trigger renders, as needed, for any data.
\n When properties change your components will too.
\n
{ state.number }\n { state.number += 1 }}>\n {\"+\"}\n \n async codeController superclassFoo\n Bar was clicked {bar} times!\n
Bar\n Foo was clicked {foo} times!\n
useStateuse will call them)once - \n`.use().once()` / `.useOnce()` / `.getOnce()`\n\nWill disable all but explicit `.refresh()` from this particular controller.\n\n```js\nconst View = () => {\n const { foo, bar } = Controller.useOnce(\"bar\");\n\n return false;\n}\n```\n> This generates state, but never automatically updates.\n\non - \n`.use().on()` / `.useOn()` / `.getOn()`\n\nDeclare properties you want to do want to watch, in addition to any inferred properties.\n\n```js\nconst View = (props) => {\n const state = Controller.use(props).on(\"bar\");\n\n return state.foo && (\n {state.bar}\n );\n}\n```\n> This will refresh when either `foo` or `bar` change, even if `foo` starts out false.\n\nonly - \n`.use().only()` / `.useOnly()` / `.getOnly()`\n\nDeclare the properties you wish to renew for. This will skip automatic inference.\n\n```js\nconst View = () => {\n const control = Controller.useOnly(\"foo\", \"bar\");\n // ...\n}\n```\n\nnot / except - \n`.use().not()` / `.useExcept()` / `.getExcept()`\n\nDeclare properties you want to exclude. *May also be chained with `on()`*\n\n```js\nconst View = () => {\n const { foo, bar } = Controller.useExcept(\"bar\");\n\n return {foo};\n}\n```\n> This will only update when `foo` is updated, even though `bar` is definitely accessed.\n\n\n \n \n
\n With this, use() simple classes as View-Controllers\n to power your UI.
\n Special hooks manage renders for you, as needed, for any data.
\n When properties update, your components will too.
\n
{ state.number }\n state.number += 1}>\n {\"+\"}\n \n { number }\n set.number += 1}>\n {\"+\"}\n \n .uses({ ... }, greedy?){ elapsed } seconds sofar;\n}\n```\n\nYou can see all the available lifecycle methods **[here](#lifecycle-api)**.\n\n\n\n.using({ ... }, greedy?)Provider (instance property)Provider (class property)tap()Foo\n Bar was clicked {bar} times!\n
Bar\n Foo was clicked {foo} times!\n