React Stuff
A collection of useful React components. Uses styled-components
for CSS.
Usage
Run npm i -S react-stuff
or yarn add react-stuff
.
Then to import, do this:
<Flex>
Applies Flexbox styling to its children.
<Flex ="center" ="center" > <div>Flex child 1</div> <div>Flex child 2</div> <div>Flex child n</div> </Flex>
<FlexToolbar>
Makes a 100% wide element that aligns children on opposite sides of the parent (or equally spaced if more than two children).
<FlexToolbar> <div>L</div> <div>R</div> </FlexToolbar> /* Will result in: |L----------------------------------------------------------R| */
<FlexToolbar> <div>L</div> <div>M</div> <div>R</div> </FlexToolbar> /* Will result in: |L-----------------------------M-----------------------------R| */
<Render>
Renders children on truthy conditions.
<Render => <div>I will not render</div> </Render>
<Spacing>
Applies margin
and/or padding
to children in the magnitude of units (one unit is 8px). The prop can take an array of either 1, 2, or 4 integers:
<Spacing =>... /* Padding is applied equivalent to `padding: 8px;` */
<Spacing =>... /* Padding is applied equivalent to `padding: 8px 32px;` */
<Spacing =>... /* Margin is applied equivalent to `margin: 32px 32px 24px 8px;` */
Alternatively, an integer can be passed:
<Spacing =>... /* Margin is applied equivalent to `padding: 16px;` */
styled-components <ThemeProvider>
Usage with the If you want to change the base unit, use styledcomponents
's <ThemeProvider>
:
<ThemeProvider => ... <Spacing => /* Padding is applied equivalent to `padding: 200px;` */
Test
Clone this, then run npm i && npm t
.