milesj
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