Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 

Spacing-helper

A tiny (117 bytes) and blazing fast standalone helper for creating consistent spacing between the elements of your UI.

import { createSpacing } from 'spacing-helper';
const spacing = createSpacing({ factor: 8 }); // 8 is default scaling factor
spacing(1,2,3,4); // '8px 16px 24px 32px'

Installation

npm i spacing-helper or yarn add spacing-helper

Motivation

Let's see some code

const HeaderStyled = styled.header`
    margin: 16px 24px;
    ...
`;

Make it consistent

const MODULE = 8;

const HeaderStyled = styled.header`
    margin: ${MODULE * 2}px ${MODULE * 3}px;
    ...
`;

Make it pretty

const HeaderStyled = styled.header`
    margin: ${spacing(2)} ${spacing(3)};
    ...
`;

And...

const HeaderStyled = styled.header`
    margin: ${spacing(2, 3)};
    ...
`;

More examples

const spacing = createSpacing({ factor: 8 });

expect(spacing()).toBe('8px');
expect(spacing(2)).toBe('16px');
expect(spacing(1, 2)).toBe('8px 16px');
expect(spacing(1, 2, 3)).toBe('8px 16px 24px');
expect(spacing(1, 2, 3, 4)).toBe('8px 16px 24px 32px');
const spacingFull = createSpacing({ factor: 8, units: 'rem', divisor: 100 });

expect(spacingFull(1, 2)).toBe('0.08rem 0.16rem');
expect(spacingFull(1, 2, 3)).toBe('0.08rem 0.16rem 0.24rem');
expect(spacingFull(1, 2, 3, 4)).toBe('0.08rem 0.16rem 0.24rem 0.32rem');

API

Name Type Default Description
divisor number 1 divisor for multiplication result of spacing and factor
factor number 8 scaling factor
precision number 2 precision of divisions
units string "px" units of transforms result (e.g. px, rem, em)

Benchmarks

Version ops/sec
v3 2,240,720
v4.x 26,891,052

About

A tiny (117 bytes) and blazing fast standalone helper for creating consistent spacing between the elements of your UI

Topics

Resources

License

Stars

Watchers

Forks