styled-atom

v2.1.1

Published

10 months ago

CSS in JS React library ✦

0High
0Medium
0Low

voodoofugu

styled-atom styles react css css-in-js

✦ Table of contents

✦ About

styled-atom is a CSS in JS React library designed for managing styles dynamically in your projects. It allows you to load styles asynchronously, and track their load status.

✦ Installation

Install the library using the following command:

npm install styled-atom

✦ StyleCore

StyleCore is the foundation of the styled-atom library. It initializes the system and ensures styles are properly loaded. Place this component at the root of your application.

Props:

path (required): The style import function.

import React from "react";
import { StyleCore } from "styled-atom";

const App = () => {
  <>
    <StyleCore
      path={(name: string) => import(`../src/style/css/${name}.css`)}
    />
    <YourComponent />
  </>;
};

✦ StyledAtom

StyledAtom is used to apply styles dynamically. It can wrap your components and render them only when all the specified styles are loaded.

Props:

fileNames (required): Array of CSS file names required for the component.

import React from "react";
import { StyledAtom } from "styled-atom";

const YourComponent = () => {
  <StyledAtom fileNames={["your-style1", "your-style2"]}>
    <SomeComponent />
  </StyledAtom>;
};

encap (optional): Encapsulates styles with CSS file names, supports custom classes.

import React from "react";
import { StyledAtom } from "styled-atom";

const YourComponent = () => {
  <StyledAtom
    encap
    // or encap="custom-class"
    // another props
  >
    <SomeComponent />
  </StyledAtom>;
};

fallback (optional): A React element to render while styles are loading.

import React from "react";
import { StyledAtom } from "styled-atom";

const YourComponent = () => {
  <StyledAtom
    fallback={<div>Loading...</div>}
    // another props
  >
    <SomeComponent />
  </StyledAtom>;
};

onLoad (optional): Callback triggered after styles are loaded successfully.

import React from "react";
import { StyledAtom } from "styled-atom";

const YourComponent = () => {
  <StyledAtom
    onLoad={() => console.log("The styles are loaded")}
    // another props
  >
    <SomeComponent />
  </StyledAtom>;
};

Also, if you just want to load the style that you will need later, you can use StyledAtom not as a wrapper.

import React from "react";
import { StyledAtom } from "styled-atom";

const YourComponent = () => {
  <>
    <StyledAtom fileNames={["your-style1"]} />
    <SomeComponent />
  </>;
};

✦ The library ensures only one style tag is used, even if the same styles appear in multiple components.

✦ Additionally

After the styles are loaded, you will see in the browser something like this:

<head>
  <style atom="✦0" name="yourStyle1">
    .yourStyle1 {
      /* encapsulated CSS */
    }
  </style>

  <style atom="✦0" name="yourStyle2">
    .yourStyle2 {
      /* encapsulated CSS */
    }
  </style>
</head>

<body>
  <div atom-shell="✦0" class="yourStyle1 yourStyle2">
    <!-- content -->
  </div>
</body>

✦ Library encapsulation uses style file names to wrap CSS and html content through classes.

✦ API

StyleCore: The component for initializing the library.
StyledAtom: A component for creating style tags.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

✦ Table of contents

✦ About

✦ Installation

✦ StyleCore

Props:

✦ StyledAtom

Props:

✦ Additionally

✦ API