├── package.json
├── Hide.js
├── Position.js
└── README.md


/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "@rebass/extras",
3 |   "private": true
4 | }
5 | 


--------------------------------------------------------------------------------
/Hide.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styled from 'styled-components'
 3 | import { display } from 'styled-system'
 4 | import hoistStatics from 'hoist-non-react-statics'
 5 | import { Box } from 'rebass'
 6 | 
 7 | const mapProps = map => Component =>
 8 |   hoistStatics(props => <Component {...map(props)} />, Component)
 9 | 
10 | export const Base = styled(Box)(display)
11 | 
12 | export const Hide = mapProps(({
13 |   xsmall,
14 |   small,
15 |   medium,
16 |   large,
17 |   xlarge,
18 |   display,
19 |   ...props,
20 | }) => ({
21 |   display: display || [
22 |     xsmall,
23 |     small,
24 |     medium,
25 |     large,
26 |     xlarge
27 |   ].map(n => n ? 'none' : 'block'),
28 |   ...props,
29 | }))(Base)
30 | 
31 | export default Hide
32 | 


--------------------------------------------------------------------------------
/Position.js:
--------------------------------------------------------------------------------
 1 | import styled from 'styled-components'
 2 | import {
 3 |   position,
 4 |   zIndex,
 5 |   top,
 6 |   right,
 7 |   bottom,
 8 |   left,
 9 | } from 'styled-system'
10 | import { Box } from 'rebass'
11 | 
12 | export const Position = styled(Box)(
13 |   position,
14 |   zIndex,
15 |   top,
16 |   right,
17 |   bottom,
18 |   left
19 | )
20 | 
21 | export const Relative = styled(Position)([])
22 | 
23 | Relative.defaultProps = {
24 |   position: 'relative'
25 | }
26 | 
27 | export const Absolute = styled(Position)([])
28 | 
29 | Absolute.defaultProps = {
30 |   position: 'absolute'
31 | }
32 | 
33 | export const Fixed = styled(Position)([])
34 | 
35 | Fixed.defaultProps = {
36 |   position: 'fixed'
37 | }
38 | 
39 | export const Sticky = styled(Position)([])
40 | 
41 | Sticky.defaultProps = {
42 |   position: 'sticky'
43 | }
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Rebass Extras
 3 | 
 4 | Reference components for using styled-system to build custom styled components. Copy and paste these components and customize them however you see fit.
 5 | 
 6 | ## Hide
 7 | 
 8 | ```jsx
 9 | import React from 'react'
10 | import styled from 'styled-components'
11 | import { display } from 'styled-system'
12 | import hoistStatics from 'hoist-non-react-statics'
13 | import { Box } from 'rebass'
14 | 
15 | const mapProps = map => Component =>
16 |   hoistStatics(props => <Component {...map(props)} />, Component)
17 | 
18 | export const Base = styled(Box)(display)
19 | 
20 | export const Hide = mapProps(({
21 |   xsmall,
22 |   small,
23 |   medium,
24 |   large,
25 |   xlarge,
26 |   display,
27 |   ...props,
28 | }) => ({
29 |   display: display || [
30 |     xsmall,
31 |     small,
32 |     medium,
33 |     large,
34 |     xlarge
35 |   ].map(n => n ? 'none' : 'block'),
36 |   ...props,
37 | }))(Base)
38 | 
39 | export default Hide
40 | ```
41 | 
42 | ```jsx
43 | <Hide xsmall small />
44 | ```
45 | 
46 | ## Position
47 | 
48 | ```jsx
49 | import styled from 'styled-components'
50 | import {
51 |   position,
52 |   zIndex,
53 |   top,
54 |   right,
55 |   bottom,
56 |   left,
57 | } from 'styled-system'
58 | import { Box } from 'rebass'
59 | 
60 | export const Position = styled(Box)(
61 |   position,
62 |   zIndex,
63 |   top,
64 |   right,
65 |   bottom,
66 |   left
67 | )
68 | 
69 | export const Relative = styled(Position)([])
70 | 
71 | Relative.defaultProps = {
72 |   position: 'relative'
73 | }
74 | 
75 | export const Absolute = styled(Position)([])
76 | 
77 | Absolute.defaultProps = {
78 |   position: 'absolute'
79 | }
80 | 
81 | export const Fixed = styled(Position)([])
82 | 
83 | Fixed.defaultProps = {
84 |   position: 'fixed'
85 | }
86 | 
87 | export const Sticky = styled(Position)([])
88 | 
89 | Sticky.defaultProps = {
90 |   position: 'sticky'
91 | }
92 | ```
93 | 
94 | 


--------------------------------------------------------------------------------