Spacer Component [React]

Simple, light-weight and clean alternative solution for using margin to create horizontal spaces.

Currently, only React[Nextjs - Remix] supported (Web Components & Vue Version WIP):

Bundle Size

Bundle	Size
Minified	3.66 kB
Minified + Gzipped	1.26 B

installation

> NPM
npm i spacer-component

> PNPM

pnpm add spacer-component

> Yarn

yarn install spacer-component

What is the Spacer Component

Simply it's a better solution than using "css margin" to create horizontal spaces between elemnts/components in your projects.

it gives you the option to choose the space you need from a range of spaces with 0.25 increment

Features

• Helps with avoiding the margin problems and unexpected behavior.
• Light-weight with Small-footprint.
• No styles or theme just plain hidden space, fits with any theme or styling.
• Fully typed with typescript.
• Wide range of incrementaled spaces.
• Support two versions of the space range of
  • space: a single space range.
  • blockSpace: a boubled value space.

    for example: 1rem = 1rem top in space & 1rem in blockSpace = 2rem --(block / horizontally)-- space

  • Uses CSS-Modules for classes scoping and avoids any confilct with your existing styles.
• Clear,meaningful and underatandble (KISS) props names and values, 0.25rem is equal to 0.25rem no magic or weired naming or guessing games, the values names are same as the CSS values.
• Uses padding.

Getting Started

After installiton,

1. Import the component in any page or component in your project

import { Spacer } from "spacer-component";

2. Import the Spacer CSS file

import "spacer-component/styles";

3. Use the component in your jsx

      <section>

    {/* This result in 0.25rem = 4px horizontal space*/}

        <Spacer space={"0.25rem"} />

      </section>

    {/* This result in 0.5(0.25*2)rem = 8px horizontal space*/}

        <Spacer blockSpace={"0.25rem"} />

      <div>

          {/* This result in 1rem = 16px horizontal space*/}

        <Spacer space={"1rem"} />

      </div>

4. Choose the suitable space for your needs

   The space prop values are avilable via intellisense it's fully-typed,just add "" or (CTRL + SPACE) and you will get a list of all the avilable values. One prop is "REQUIRED" at least. Both props type is "STRING".

{
  /* Default value = 0.25rem 
  = padding-block: 0.25rem 
  = total 8px horizontal space  */
}
<Spacer space={"0.25rem"} />;
{
  /* Default value = 0.25rem 
  = padding-block: 0.25rem 
  = total 8px horizontal space  */
}
<Spacer space={"0.50rem"} />;
{
  /* Default value = 0.25rem 
  = padding-block: 0.25rem 
  = total 8px horizontal space  */
}
<Spacer space={"0.75rem"} />;
{
  /* Default value = 0.25rem 
  = padding-block: 0.25rem 
  = total 8px horizontal space  */
}
<Spacer space={"1rem"} />;
{
  /* Default value = 0.25rem 
  = padding-block: 0.25rem 
  = total 8px horizontal space  */
}
<Spacer space={"1.125rem"} />;
{
  /* Default value = 0.25rem 
  = padding-block: 0.25rem 
  = total 8px horizontal space  */
}
<Spacer space={"1.5rem"} />;

But why not using the regular css marign instead?

Props Guide

For now the only avilable Props are space and blockSpace one is required at least for the component to work.

This tables demonstarte the "Space and blockSpace Props( string )" Values to the total horizontal space.

In the space prop: simply the value you choose and it's result

Space Prop Value	Value (Rem)	Value (Pixels)
0	0	0
0.125rem	0.125rem	2
0.25rem	0.25rem	4
0.5rem	0.5rem	8
0.75rem	0.75rem	12
1rem	1rem	16
1.25rem	1.25rem	20
1.5rem	1.5rem	24
1.75rem	1.75rem	28
2rem	2rem	32
2.25rem	2.25rem	36
2.5rem	2.5rem	40
2.75rem	2.75rem	44
3rem	3rem	48
3.25rem	3.25rem	52
3.5rem	3.5rem	56
3.75rem	3.75rem	60
4rem	4rem	64
4.25rem	4.25rem	68
4.5rem	4.5rem	72
4.75rem	4.75rem	76
5rem	5rem	80
5.25rem	5.25rem	84
5.5rem	5.5rem	88
5.75rem	5.75rem	92
6rem	6rem	96
6.25rem	6.25rem	100

---

In the blockSpace prop: The value you choose is doubled * 2 for example 1rem = 1rem*2 = (2rem = 32px)

blockSpace Prop Value	Value (Rem)	Value (Pixels)
0	0	0px
0.125rem	0.25rem	4px
0.25rem	0.5rem	8px
0.5rem	1rem	16px
0.75rem	1.5rem	24px
1rem	2rem	32px
1.25rem	2.5rem	40px
1.5rem	3rem	48px
1.75rem	3.5rem	56px
2rem	4rem	64px
2.25rem	4.5rem	72px
2.5rem	5rem	80px
2.75rem	5.5rem	88px
3rem	6rem	96px
3.25rem	6.5rem	104px
3.5rem	7rem	112px
3.75rem	7.5rem	120px
4rem	8rem	128px
4.25rem	8.5rem	136px
4.5rem	9rem	144px
4.75rem	9.5rem	152px
5rem	10rem	160px
5.25rem	10.5rem	168px
5.5rem	11rem	176px
5.75rem	11.5rem	184px
6rem	12rem	192px
6.25rem	12.5rem	200px

Changelog