Aesthetic via React

Style React components with hooks or HOCs, using the powerful Aesthetic library.

import React from 'react';
import { useStyles } from 'aesthetic-react';

export type Props = {
  children: React.ReactNode;
};

export default function Button({ children }: Props) {
  const [styles, cx] = useStyles(({ unit }) => ({
    button: {
      textAlign: 'center',
      display: 'inline-block',
      padding: unit,
    },
  }));

  return (
    <button type="button" className={cx(styles.button)}>
      {children}
    </button>
  );
}

Requirements

• React 16.6+

Installation

yarn add aesthetic aesthetic-react react
// Or
npm install aesthetic aesthetic-react react

Documentation

https://milesj.gitbook.io/aesthetic/integrations/react