3.0.7 • Published 10 months ago

react-style-mods v3.0.7

Weekly downloads
15
License
MIT
Repository
-
Last release
10 months ago

react-style-mods

Effortlessly manage conditional inline styles in your React components!

Introduction

react-style-mods is a lightweight utility that simplifies the process of applying conditional inline styles (mods) to your React components based on props.

Features

  • Simple Mod Definitions: Define your styles once and reuse them across components.
  • Conditional Styles: Apply styles dynamically based on boolean props or parameters.
  • TypeScript Support: Enjoy full type safety when defining and using mods.
  • Zero Dependencies: Minimal overhead with no external dependencies.

Installation

Install via npm or yarn:

npm install react-style-mods

or

yarn add react-style-mods

Quick Start

1. Define Your Mods

Use defineStyleMods to create a set of style modifications:

import { defineStyleMods } from "react-style-mods";

const mods = defineStyleMods({
    // Static mod
    primary: { backgroundColor: "blue", color: "white" },

    // Dynamic mod with a parameter
    size: (size: "small" | "large") => ({
        fontSize: size === "small" ? "12px" : "24px",
    }),

    margin: (margin: number = 10) => ({
        margin: `${margin}px`,
    }),
});

2. Wrap Your Component

Wrap your component with withStyleMods to apply the mods:

import React from "react";
import { withStyleMods } from "react-style-mods";

const Button = ({ style, children, ...props }) => (
    <button style={style} {...props}>
        {children}
    </button>
);

const StyledButton = withStyleMods(mods, Button);

3. Use the Component with Mods

Now, you can apply mods directly via props:

<StyledButton primary margin>Primary Button</StyledButton>
<StyledButton size="large" margin>Large Button</StyledButton>
<StyledButton disabled margin={30}>Disabled Button</StyledButton>

The styles will be applied conditionally based on the props you pass with minimum runtime overhead.

TypeScript Support

react-style-mods provides full TypeScript support, ensuring that your mods and components are type-safe.

Using satisfies (TypeScript >= 4.9)

If you're using TypeScript 4.9 or newer, you can use the satisfies operator for even better type inference:

const mods = {
    primary: { backgroundColor: "blue", color: "white" },
    size: (size: "small" | "large") => ({
        fontSize: size === "small" ? "12px" : "24px",
    }),
} satisfies StyleModsDefinition;

API Reference

defineStyleMods(mods)

Defines a set of style modifications.

  • mods: An object where each key is a mod name, and each value is either:
    • A style object (React.CSSProperties).
    • A function that returns a style object, optionally taking a parameter.

withStyleMods(mods, Component)

Wraps a component to enable style mods.

  • mods: The mods defined using defineStyleMods.
  • Component: The React component to wrap.

createModsStylesFromProps(props, mods)

Creates a style object based on the props and mods provided.

Examples

Conditional Styling

<StyledButton primary>Primary Button</StyledButton>

Applies the primary styles when the primary prop is truthy.

Dynamic Styling with Parameters

<StyledButton size="small">Small Button</StyledButton>

Applies styles based on the value of the size prop.

Combining Mods

<StyledButton primary size="large">
    Large Primary Button
</StyledButton>

Combines multiple mods for complex styling.

License

MIT License

3.0.4

10 months ago

3.0.3

10 months ago

3.0.2

10 months ago

3.0.1

10 months ago

3.0.7

10 months ago

3.0.6

10 months ago

3.0.5

10 months ago

3.0.0

10 months ago

2.1.1

3 years ago

2.1.0

3 years ago

2.0.4

5 years ago

2.0.3

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.2

5 years ago

1.0.3

5 years ago

1.0.1

5 years ago