Installation

Install the package in your project directory with:

npm install @sashathor/css-modules-ui-lib-with-theming

Create React App Demo

A simple demo of the library in a Create React App project.

Getting Started

cd demos/cra
npm install
npm run start

Custom Themes switching

// App.tsx

import React from "react";
import {
  Button,
  Chart,
  ThemeProvider,
} from "@sashathor/css-modules-ui-lib-with-theming";

export const App = () => {
  const [theme, setTheme] = React.useState(themes.light);

  return (
    <>
      <ThemeProvider theme={theme}>
        <div style={{ marginBottom: 20 }}>
          <Button>Button</Button>
        </div>
        <Chart />
      </ThemeProvider>
      <button
        style={{ marginTop: 20 }}
        onClick={() =>
          setTheme(theme === themes.light ? themes.dark : themes.light)
        }
      >
        switch theme
      </button>
    </>
  );
};

Default Theme outside of ThemeProvider

// App.tsx

import React from "react";
import { Button, Chart } from "@sashathor/css-modules-ui-lib-with-theming";

export const App = () => (
  <>
    <Button>Button</Button>
    <br />
    <br />
    <Chart />
  </>
);

Style override via className prop

// theme.module.css

.customChart {
  background-color: red;
}

// App.tsx

import React from "react";
import themeStyles from "./theme.module.css";
import { Chart } from "@sashathor/css-modules-ui-lib-with-theming";

export const App = () => (
  <>
    <Chart className={themes.customChart} />
  </>
);

Style override via style prop

// App.tsx

import React from "react";
import { Chart } from "@sashathor/css-modules-ui-lib-with-theming";

export const App = () => (
  <>
    <Chart style={{ backgroundColor: "#00ff00" }} />
  </>
);

Style override via Emotion's css method

// App.tsx

import React from "react";
import { css } from "@emotion/css";
import { Chart } from "@sashathor/css-modules-ui-lib-with-theming";

export const App = () => (
  <>
    <Chart
      className={css`
        background-color: orange;
      `}
    />
  </>
);

Next.js Demo

A simple demo of the library in a Next.js project. Note: The library is compatible with Next.js Server Components out of the box.

Getting Started

cd demos/nextjs
npm install
npm run dev

Custom Theme

Default Theme