
npm install @morfeo/react@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 | 
---
``bashnpm
npm i @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: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 ;
}
`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 ;
}
``