@morfeo/react

!Morfeo logo

@morfeo/react is part of the @morfeo eco-system, a set of framework-agnostic tools that help you to create beautiful design systems for your web and mobile apps.

---

Documentation | API | Contributing | 

---

Installation

``bash


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.

@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:

- useClassNames
- useClassName

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:

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

return Click me;
}
`

useClassNames

`typescript
function useClassNames(
styles: Record,
): Record;
`

$3

`tsx
function Button() {
const classes = useClassNames({
container: {
px: 'm',
},
button: {
p: { lg: 'm', sm: 's' },
bg: 'primary',
'&:hover': {
opacity: 'light',
},
},
});

return (



);
}
`

useClassName

`typescript
function useClassName(style: Style): string;
`

$3

`tsx
function Button() {
const className = useClassName({
p: { lg: 'm', sm: 's' },
bg: 'primary',
'&:hover': {
opacity: 'light',
},
});

return Click me;
}
``