stylesbox

Overview

stylesbox is a lightweight, zero dependecy package written in TypeScript that simplifies styling by providing a component. This component behaves like a standard <div/>, but it allows you to define CSS styles using a css property. The styles you provide are automatically transformed into CSS rules and applied as a unique className, making it easy to manage and organize your styles.

Features

• Component: A flexible and customizable container that can be styled using the css property.

Installation

You can quickly get started with stylesbox by installing it via yarn or npm.

Yarn

yarn add -D stylesbox

NPM

npm install --save-dev stylesbox

Getting started

Import the Box component from stylesbox and start using it in your project.

import { Box } from 'stylesbox'

const MyComponent = () => {
  return (
    <Box
      css={{
        backgroundColor: 'red',
        // Add more CSS properties here
      }}
    >
      Hello, world!
    </Box>
  )
}

Usage

The css property of the component accepts an object where keys are CSS properties, and values are the corresponding property values. You can define any valid CSS styles to customize the appearance of the component. The library will generate a unique className for the provided styles and apply them to the component.

Example

import { Box } from 'stylesbox'

const StyledBox = () => {
  return (
    <Box
      css={{
        backgroundColor: 'lightblue',
        padding: '20px',
        borderRadius: '8px',
        boxShadow: '0 0 10px rgba(0, 0, 0, 0.2)',
      }}
    >
      This is a beautifully styled box!
    </Box>
  )
}

Hope you find stylesbox useful for simplifying styling in your projects. If you have any questions, issues, or feature requests, please feel free to open an issue here https://github.com/isolonenko/stylesbox/issues.