Helpers for React to make your life a little easier
How to Use
Extended Render Function
Custom React Attributes
View Port Helper Decorator
import { context } from 'context'
...
@contex
export default class Something extends Component {
....
}
...
render () {
const { start, end } = this.props
const { now } = this.state
return (
<div>{start} + {end} + {now}</div>
)
}
...
...
render (props, state) {
const { start, end } = props
const { now } = state
return (
<div>{start} + {end} + {now}</div>
)
}
...
...
render ({ start, end }, { now }) {
return (
<div>{start} + {end} + {now}</div>
)
}
...
Attributes | Description | Status |
---|---|---|
hide | boolean value that will render or not render a component or string for devices such as hide='mobile' |
|
show | boolean value that will render or not render a component or string for devices such as show='tablet and desktop only' |
|
href | allows any DOM element to be clickable | |
hideOnMobile | hides the element when screen size is on a mobile device | |
columnOnMobile | changes the current element to a flex-box column on mobile | |
moment | if on an input of some kind, changes onChange argument to be a moment object | |
onEsc or onEscape | calls a function when element is focused and the escape key is hit. | |
onEnter | calls a function when element is focused and the enter key is hit. | |
onTab | calls a function when element is focused and the tab key is hit. | |
truncate | takes arguments such as 1 line , 2 lines , etc. If no arguments are passed it defaults to 1 line . Basically it just adds css to the element that will truncate it. |
|
row | takes a boolean or a string such as row='mobile' |
|
column | takes a boolean or a string such as column='desktop' |
|
tooltip | allows you to add a tooltip to whatever element. Basically would take all the functionality of react-tooltip but make it even easier to use. | |
hideTooltip | hide a tooltip, takes a boolean value or a string for viewport size | |
showTooltip | shows a tooltip, takes a boolean value or a string for viewport size |
...
render () {
const { start, end } = this.props
const { now } = this.state
return (
<div>
{start > end && (
<div>
{end >= start && (
<div>Cool</div>
)}
</div>
)}
</div>
)
}
...
...
render ({ start, end }, { now }) {
return (
<div show={start > end}>
<div hide={end >= start}>Cool</div>
</div>
)
}
...
Can also be used on regular React functions.
...
componentDidMount(x,y,z){
this.setState({
height: window.innerHeight + 'px',
width: window.innerWidth + 'px'
})
}
render () {
const { height, width, now } = this.state
const { start, end } = this.props
if (width <= 320) {
// do something for Mobile
}
return (
<div show={start > end} href='//google.com' hideOnMobile >
<div hide={end >= start}>{now}</div>
</div>
)
}
...
...
@viewPort
render (screenSize, props, state) {
if (screenSize.mobile) {
// do something
}
return (
<div show={props.start > props.end} href='//google.com' hideOnMobile >
<div hide={props.end >= props.start}>{state.now}</div>
</div>
)
}
...
...
@viewPort
render ({ mobile, tablet, width, iphone4 }, { start, end }, { now }) {
if (mobile) {
// do something
}
return (
<div show={start > end} href='//google.com' hideOnMobile >
<div hide={end >= start}>{now}</div>
</div>
)
}
...