https://github.com/ndrean/bau-react-css

Lightweight CSS-in-JS for React based on BauCSS
https://github.com/ndrean/bau-react-css

css css-in-js css-react react styled-components

Last synced: 26 days ago
JSON representation

Lightweight CSS-in-JS for React based on BauCSS

• Host: GitHub
• URL: https://github.com/ndrean/bau-react-css
• Owner: ndrean
• Created: 2023-07-04T14:33:51.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-07-12T13:56:59.000Z (over 1 year ago)
• Last Synced: 2024-04-14T17:00:36.935Z (7 months ago)
• Topics: css, css-in-js, css-react, react, styled-components
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/bau-reactcss
• Size: 115 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
# CSS-in-JS package for React

This package is based on BauCSS and adds a `styled` component for React.

[![npm bundle size](https://img.badgesize.io/ndrean/bau-react-css/main/src/bau-reactcss.js?compression=gzip)](https://bundlephobia.com/package/[email protected])

## Usage

```js

import BauReactCss from "bau-reactcss";

const { css, styled, keyframes, createGlobaStyles } = BauReactCss();

```

## Worked example

## Create global styles

```js

createGlobalStyles`

  :root {

      margin: 0px;

      --main-color: midnightblue;

  }

`;

```

## Create a class

```jsx

const blue = css`

  color: var(--main-color);

`;

A blue paragraph
;

```


You can create a component:

```jsx

const colored = (props)=> css`

  color: ${props.color ?? "var(--main-color)"};

`;

const P = (props) => {

  const {children, ...rest} = props

  
{children}

)

}


A blue paragraph

A red paragraph

```


## Create a styled component

```jsx

const Btn = (props) => style("button", props)`

  cursor: pointer;

  color: ${props.color};

`;

Blue button;

```

## Create a keyframe

```js

const rescale = keyframes`

  0% {transform: scale(0.5)}

  100% {transform: scale(1)}

`;

const red = css`

  color: red;

   animation: ${rescale} 1s ease infinite;

`

Check this

```


## Example of conditional classes

You have two ways to use it. Define a function or object that returns CSS strings:

```jsx

const styles = (props) => {

  base: `

    cursor: pointer;

    font-size: ${props.size ?? 1}em;

    border-radius: 0.3em;

    padding: 0.3em;

  `,

  danger: `

    color: red;

    animation: ${rescale} 1s ease infinite;

  `,

  disabled: `

    pointer-events: none;

    opacity: ${props.opacity};

  `;

}

```

You can write:

```jsx

const Btn = (props)=> styled('button', props)`

  ${styles(props).base +

  props.danger ? styles(props).danger : ""}

`

Base button

 alert('danger')}>Danger button

```

To make life easier, the primitive `styled` can read the props and sets the class when you use the styles object above:

```jsx

const Button = (props) => styled("button", props)`

  ${styles(props).base}

  ${styles(props)}

`;

Base Button

  Shadowed Danger

;

```