0.4.0 • Published 3 years ago
react-native-spacing v0.4.0
react-native-spacing
Consitent React Native spacing utility.
Installation
$ yarn add react-native-spacing
Usage
// src/theme.js
import { createMargin, createPadding } from 'react-native-spacing';
export const sizes = [0, 5, 10, 20, 40, 80, 160];
export const m = createMargin(sizes);
export const p = createPadding(sizes);
// src/components/foo.js
import { View } from 'react-native';
import { m, p } from '../theme';
const $ = {
container: {
...m[6],
...m.b0,
...p.v4,
},
};
// --> { margin: 160, marginBottom: 0, paddingVertical: 40 }
export default function Foo({ style, ...rest }) {
return <View {...rest} style={[$.container, style]} />;
}
Documentation
createMargin(sizes, aliases)
import { createMargin } from 'react-native-spacing';
const m = createMargin([0, 4, 8, 16, 32]);
m[1]; // --> { margin: 4 }
m[4]; // --> { margin: 32 }
m.v2; // --> { marginVertical: 8 }
m.b3; // --> { marginBottom: 16 }
// Etc...
You can pass custom aliases like so:
const m = createMargin([0, 10, 20, 40, 80], {
T: 'Top',
R: 'Right',
B: 'Bottom',
L: 'Left',
Y: 'Vertical',
X: 'Horizontal',
});
m.Y2; // --> { marginVertical: 20 }
m.B3; // --> { marginBottom: 40 }
// Etc...
createPadding(sizes, aliases)
import { createPadding } from 'react-native-spacing';
const p = createPadding([0, 4, 8, 16, 32]);
p[4]; // --> { padding: 32 }
// Same as above...
0.4.0
3 years ago
0.3.0
3 years ago
0.2.11
5 years ago
0.2.10
5 years ago
0.2.9
5 years ago
0.2.8
5 years ago
0.2.7
5 years ago
0.2.6
5 years ago
0.2.5
5 years ago
0.2.4
5 years ago
0.2.3
5 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.0
5 years ago
0.0.8
6 years ago
0.0.7
6 years ago
0.0.6
6 years ago
0.0.5
6 years ago
0.0.4
6 years ago
0.0.3
6 years ago
0.0.2
6 years ago
0.0.1
6 years ago