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>
)
}
...
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent