Add margin and padding without creating a DOM-wrapper

⚠️ Dependencies: Your project need work with CSS modules.

npm install @mukhindev/react-spacing

Package components use the CSS modules without pre-processing, so you can process them to suit your build. Vite and Next.js support CSS modules.

import Spacing from "@mukhindev/react-spacing";

export default function App() {
    return (
        <main>
            <Spacing m={0} mb={16}>
                <h1>Hello World!</h1>
            </Spacing>
            <Spacing p={[8, 12]}>
                <button>Greet</button>
            </Spacing>
        </main>
    )
}

DOM:

<main>
    <h1 class="" style="">Hello World!</h1>
    <button class="" style="">Greet</button>
</main>

The wrapped element must support className and style props.

string — no transform
number — as px
array — see Array values table

Array values works with m and p