0.7.1 • Published 3 years ago
@aesthetic/react v0.7.1
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
0.7.1
3 years ago
0.7.0
3 years ago
0.6.13
3 years ago
0.6.12
3 years ago
0.6.11
3 years ago
0.6.10
3 years ago
0.6.9
3 years ago
0.6.7
3 years ago
0.6.8
3 years ago
0.6.6
3 years ago
0.6.5
3 years ago
0.6.4
3 years ago
0.6.3
3 years ago
0.6.2
3 years ago
0.6.1
3 years ago
0.6.0
3 years ago
0.5.0
3 years ago
0.4.1
4 years ago
0.4.0
4 years ago
0.3.0
4 years ago
0.2.2
4 years ago
0.2.1
4 years ago
0.2.0
4 years ago
0.1.5
4 years ago
0.1.4
4 years ago
0.1.3
4 years ago
0.1.2
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago
0.0.3
4 years ago
0.0.2
4 years ago
0.0.1
4 years ago