Get started

There are only 2 steps needed to get started!

First step:

Run npm i react-style-kit in your project directory.

Second step:

Import react-style-kit in your files and define a component:

import styled from 'react-style-kit';

const Container = styled('div', () => ({
  display: 'flex',
  justifyContent: 'center',
  // other styles...
}));

So far we have defined a simple div element, the CSS object we have used will be injected by react-style-kit in the documents head as a style tag.

Now let's also pass it a custom prop!

import styled from 'react-style-kit';

const Container = styled('div', ({ isBgTransparent }) => ({
  display: 'flex',
  justifyContent: 'center',
  ...isBgTransparent && {
    background: 'transparent',
  },
}));

const HomepageComponent = () => {
  const isUserLoggedIn = getSession();

  return (
    <Container isBgTransparent={!!isUserLoggedIn}>
      <h1>Hello Homepage!</h1>
    </Container>
  )
}

export default HomepageComponent;

This way we can easily create dynamic styling based on states and other data.

Define media queries and other CSS selectors such as :hover:

const Container = styled('div', () => ({
  display: 'flex',
  justifyContent: 'center',

  ':hover': {
    background: 'red',
  },

  '@media (max-width: 720px)': {
    flexDirection: 'column',

    ':hover': {
      background: 'blue',
    },
  },
}));

You can also extend styling with inline CSS objects:

import styled from 'react-style-kit';

const Container = styled('div', ({ isBgTransparent }) => ({
  display: 'flex',
  justifyContent: 'center',
  ...isBgTransparent && {
    background: 'transparent',
  },
}));

const HomepageComponent = () => {
  const isUserLoggedIn = getSession();

  return (
    <Container isBgTransparent={!!isUserLoggedIn} inline={{
      position: 'relative',
      maxWidth: '350px',
    }}>
      <h1>Hello Homepage!</h1>
    </Container>
  )
}

export default HomepageComponent;

About

react-style-kit offers a dynamic approach to manage CSS styles in React applications.

It includes a variety of utility functions and a style management system that can be integrated into React components.

The system is designed to generate and inject CSS styles dynamically into the HTML document's head, facilitating efficient style management in React applications. It does not duplicate CSS styles and even more, inherits CSS properties from other CSS classes for newly created components, if any are available