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:

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

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

function Button() { const classes = useClassNames({ container: { px: 'm', }, button: { corner: 'm', p: { lg: 'm', sm: 's' }, bg: 'primary', '&:hover': { bg: 'primary.lightest', }, }, }); return ( <div className={classes.container}> <button className={classes.button}>Click me</button> </div> ); }

function Button() {
  const classes = useClassNames({
    container: {
      px: 'm',
    },
    button: {
      corner: 'm',
      p: { lg: 'm', sm: 's' },
      bg: 'primary',
      '&:hover': {
        bg: 'primary.lightest',
      },
    },
  });

  return (
    <div className={classes.container}>
      <button className={classes.button}>Click me</button>
    </div>
  );
}

Result

Loading...

useClassName

function useClassName(style: Style): string;

Example

Live Editor

function Button() { const className = useClassName({ corner: 'm', p: { lg: 'm', sm: 's' }, bg: 'primary', '&:hover': { bg: 'primary.lightest', }, }); return <button className={className}>Click me</button>; }

function Button() {
  const className = useClassName({
    corner: 'm',
    p: { lg: 'm', sm: 's' },
    bg: 'primary',
    '&:hover': {
      bg: 'primary.lightest',
    },
  });

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

Result

Loading...