@nfq/spacer NPM

@nfq/spacer

Description:

A simple component to help with spacing in coiponent based layout systems.

Installation:

To install the package run

npm install @nfq/spacer

if you are in yarn

yarn add @nfq/spacer

or on pnpm

pnpm install @nfq/spacer

PeerDependencies:

The following PeerDependencies are needed so the component does work:

core-decorators >= 0.20.0
prop-types >= 15
react >= 17
styled-components >= 5

Usage:

import {Component} from 'react';
import {Spacer} from '@nfq/spacer';

export default class App extends Component {
    render() {
        return (
            <Wrapper>
                <div>Content</div>
                <Spacer y={2}> {/* gives an vertical spacing of 10px or 1rem */}
                <div>Content2</div>
            </Wrapper>
        )
    }
}

Spacer Props:

Prop	type	Description
isInline	Boolean	Tells the spacer if it should behave like an inline element (Good for in text spacings)
maxX	Number	If used in an flex container this defines the max horizontal spacing size. Wants an multiplication factor thats used with baseSpacing
maxY	Number	If used in an flex container this defines the max vertical spacing size. Wants an multiplication factor thats used with baseSpacing
x	Number	Defines the horizontal spacing size. (In an flexbox it defines the base) Wants an multiplication factor thats used with baseSpacing
y	Number	Defines the horizontal spacing size. (In an flexbox it defines the base) Wants an multiplication factor thats used with baseSpacing

Custom config

import {Component} from 'react';
import {ThemeProvider} from 'styled-components';

export default class App extends Component {
    render() {
        const customConf = {baseSpacing: 5};

        return (
            <ThemeProvider theme={{nfqspacer: customConf}}>
                <div>Content</div>
                <Spacer y={2}> {/* gives an vertical spacing of 10px or 1rem */}
                <div>Content2</div>
            </ThemeProvider>
        )
    }
}