Skip to main content

react

Installation

# npm
npm i @morfeo/react

# yarn
yarn add @morfeo/react

@morfeo/react re-expose @morfeo/hooks and @morfeo/web, we suggest you to read their documentations.

In addition to @morfeo/hooks, this package add 2 other hooks:

These hooks are similar to useStyles and useStyle of @morfeo/hooks, but instead of returning a css object they return a class (or a set of classes) to apply to the component; they are needed because with inline styles we cannot handle media queries or pseudo classes:

function Button() {
const className = useClassName({
p: { lg: 'm', sm: 's' }, // <--- Unhandled by useStyle(s)
bg: 'primary',
'&:hover': {
opacity: 'light', // <--- Unhandled by useStyle(s)
},
});

return <button className={className}>Click me</button>;
}

useClassNames

function useClassNames<Key extends string>(
styles: Record<Key, Style>,
): Record<Key, string>;

Example

Live Editor
Result
Loading...

useClassName

function useClassName(style: Style): string;

Example

Live Editor
Result
Loading...