0.1.0 • Published 7 years ago
@divyagnan/rn-style-utils v0.1.0
@divyagnan/rn-style-utils
Simple style helpers to make react native prototyping easier
Example Usage
// import the helpers that you want
import { m1, mb78, p50, pt56 } from "@divyagnan/rn-style-utils";
// use the helpers
// you can use the helpers directly
<Text style={m1}>This text will have a margin of 1</Text>;
<Text style={[mb78, pt56]}>
This text will have a marginBottom of 78 and a paddingTop of 56
</Text>;
// or you can use them with StyleSheet
const styles = StyleSheet.create({
coolNewStyle: {
// this style will have a padding of 50
...p50
}
});
Available Helpers
This library exports the following helpers:
Margin
m[1-100]
- used to apply amargin
between 1 and 100- ex:
m5
sets a margin of 5
- ex:
mt[1-100]
- used to apply amarginTop
between 1 and 100- ex:
mt22
sets a marginTop of 22
- ex:
mb[1-100]
- used to apply amarginBottom
between 1 and 100- ex:
mb88
sets a marginBottom of 88
- ex:
mr[1-100]
- used to apply amarginRight
between 1 and 100- ex:
mr2
sets a marginRight of 2
- ex:
ml[1-100]
- used to apply amarginLeft
between 1 and 100- ex:
ml12
sets a marginLeft of 12
- ex:
Padding
p[1-100]
- used to apply apadding
between 1 and 100- ex:
p5
sets a padding of 5
- ex:
pt[1-100]
- used to apply apaddingTop
between 1 and 100- ex:
pt22
sets a paddingTop of 22
- ex:
pb[1-100]
- used to apply apaddingBottom
between 1 and 100- ex:
pb88
sets a paddingBottom of 88
- ex:
pr[1-100]
- used to apply apaddingRight
between 1 and 100- ex:
pr2
sets a paddingRight of 2
- ex:
pl[1-100]
- used to apply apaddingLeft
between 1 and 100- ex:
pl12
sets a paddingLeft of 12
- ex:
0.1.0
7 years ago