@aesthetic/react
    TypeScript icon, indicating that this package has built-in type declarations

    0.7.1 • Public • Published

    Aesthetic - React Integration

    Build Status npm version npm deps

    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

    Install

    npm i @aesthetic/react

    DownloadsWeekly Downloads

    160

    Version

    0.7.1

    License

    MIT

    Unpacked Size

    45.2 kB

    Total Files

    27

    Last publish

    Collaborators

    • milesj