Aesthetic - React Integration

Provides styles for React components through hook or HOC based APIs. Built around the powerful Aesthetic core library.

import React from 'react';
import { createComponentStyles, useStyles } from '@aesthetic/react';

export const styleSheet = createComponentStyles((css) => ({
	button: css.mixin('reset-button', {
		padding: css.var('spacing-df'),
	}),

	button_block: {
		display: 'block',
	},
}));

export interface ButtonProps {
	children: React.ReactNode;
	block?: boolean;
}

export default function Button({ children, block = false }: ButtonProps) {
	const cx = useStyles(styleSheet);

	return (
		<button type="button" className={cx('button', block && 'button_block')}>
			{children}
		</button>
	);
}

Features

• Hook and HOC based APIs for styling components, accessing themes, and handling directionality.
• Global, document, and element level themes powered through context.
• Nested themes that avoid polluting the global scope.
• First-class directionality support (RTL, LTR).

Requirements

• React 16.6+ / 17+

Installation

yarn add @aesthetic/react react react-dom

Documentation

https://aestheticsuite.dev/docs/react