0.1.5 • Published 6 years ago
react-rless v0.1.5
React Rless
Easily to make your custom component happened with renderless component and do somting powerful. ✍️✍️✍️
Installation
> yarn add react-rless
peerDeps
- react
Example
\
CopyText renderless component help you to use execCommand('copy')
with the value and custom your own component, like copy button Component.
import { CopyText } from 'react-rless'
<CopyText text="Some Copy Text">
{props => (
<div
style={{
width: 200,
height: 60,
textAlign: 'center',
border: '1px solid #ccc',
cursor: 'pointer',
lineHeight: '60px'
}}
onClick={props.onClickToCopy}
>
{props.isCopy ? 'Copied !' : 'Copy'}
</div>
)}
</CopyText>
\
ScrollTo component help to do window or element auto scrolling animation and skip the animation when you wheel by mouse.
import { ScrollTo } from 'react-rless'
<ScrollTo scrollById="box">
{props => (
<div
id="box"
style={{
width: 400,
height: 100,
overflow: 'auto',
border: '1px solid #ccc',
margin: '0 auto'
}}
>
<button onClick={() => props.scrollToElement('first')}>Scroll to first target</button>
<button onClick={() => props.scrollToElement('second')}>Scroll to second target</button>
<div id="first" style={{ marginTop: 800 }}>
First scroll target element
</div>
<div id="second" style={{ marginTop: 400 }}>
Second scroll target element
</div>
</div>
)}
</ScrollTo>
\
Interval component help to re-render the component by native interval timer, but you should be careful because it use the forceUpdate to re-render component, so don't use it on heavy render work.
ex: when we want to countdown the timer, it can be helpful to re-render stateless component.
import { Interval } from 'react-rless'
<Interval>
{({ timerID }) => (
<h1 style={{ textAlign: 'center' }}>
TimerID: [{timerID || 0}] {new Date().toString()}
</h1>
)}
</Interval>
License
MIT