@morfeo/hooks expose a set of hooks to easily use morfeo inside a
To properly use Morfeo in a React environment, you need to have a version of
react >= 18
npm i @morfeo/hooks
yarn add @morfeo/hooks
Use this hook to get the current theme and use it inside a components:
If you already know the core API useTheme is the equivalent of
morfeo.getTheme(), the main difference is that useTheme subscribes your component to theme changes and force a re-render when they'll happen, for example when dark mode is triggered.
A hook to retrieve the current theme name and a callback to change it,
they correspond to
morfeo.setCurrentTheme of the core-api.
If you don't need the theme, but to generate a style based on the theme; The hooks
useStyle are made for this reason:
Use it if you need to generate just one style:
Just like useTheme, useStyles and useStyle are the equivalent of the core API's
but they force a re-render when the theme changes.
This hook is used under the hood in all of the others hooks, you'll probably never need to use it directly.
useSyncMorfeo the component is subscribed to theme changes, which means that if the theme changes the component
If instead we use directly the
morfeo instance from the core-api without using
useSyncMorfeo, the component will not re-render when the theme changes:
Use it to get the default props of a components, a common use is to merge the defaut props with the current props: