npm package: @nfq/spacer
Description: A simple react spacing component to help with better layouting
Author: .NFQ | Christoph Kruppe
Latest version: 1.3.0
Deprecated: This package is no longer supported. Please use @nfq/react-grid


# @nfq/spacer

# Table of Contents
- [Description](#description)
- [Installation](#installation)
- [PeerDependencies](#peerdependencies)
- [Usage](#usage)
  - [Spacer Props](#spacer-props)
  - [Custom config](#custom-config)
- [Contributions](#contributions)
- [Licence](#licence)
- [Questions](#questions)

## Description: [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
A simple component to help with spacing in coiponent based layout systems.
## Installation:
To install the package run
```sh
npm install @nfq/spacer
```
if you are in yarn
```sh
yarn add @nfq/spacer
```
or on pnpm
```sh
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:
```javascript
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    | required | 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

```javascript
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>
        )
    }
}
```

| Prop         | type   | default | Description                                                                                 |
| ------------ | ------ | :-----: | ------------------------------------------------------------------------------------------- |
| baseSpacing  | Number | 5       | The base spacing used to multiply in px                                                     |

---
---
## Contributions:
.NFQ | Christoph Kruppe

---
---
## License:
The licence used is: `MIT`
Click on licence badge for licence details:
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

---
---
## Questions:
If you have any furter questions please contact the following email address:
email: c.kruppe@nfq.de