Booleon React is a DX focused library for, a highly typed declarative, styling, using component boolean properties. Works by mapping a pre-defined entry of css with keys that can be static (string) or dynamic (RegEx).

Get Started

Instalation

npm i @booleon/react

yarn add @booleon/react

Create Component

import { booleon } from '@booleon/react';
import { background } from '@booleon/module';

export const ButtonStyled = booleon.button(background);

Basic Usage

export const MyComponent = () => {
  return (
    <ButtonStyled bg_color_f00 />
  )
}

Conditional styling

Only applies css if a condition is satisfied.

export const MyComponent = ({ color }) => {
  return (
    <ButtonStyled bg_color_f00={color === 'red'} />
  )
}

Responsiveness

Add styles to media queries.

export const MyComponent = () => {
  return (
    <ButtonStyled md__bg_color_f00 />
  )
}

Pseudo Elements

Applies, possible nested, pseudo elements.

export const MyComponent = () => {
  return (
    <ButtonStyled hover__bg_color_f00 />
  )
}

Keyframes

Create simple and fast keyframes.

import { booleon } from '@booleon/react';
import { container, animation } from '@booleon/module';

const Component = booleon.div(container, animation);
export const MyComponent = () => {
  return (
    <Component
      kf__myAnimation
      from__top
      to__top_full
      ani_name_myAnimation
      ani_iteration_infinite
    />
  )
}

Dark mode

Allows dark theme props declarations. (default from prefers-color-scheme)

import { useTheme } from '@booleon/react';

export const MyComponent = () => {
  const { toggleTheme } = useTheme();
  return (
    <ButtonStyled dark__bg_color_f00 onClick={toggleTheme} />
  )
}