react-trc
v1.0.2
Published
simple react-transition for change classNames
Downloads
11
Readme
react-rtc
simple react-transition for change classNames
installation:
npm install react-rtc
import:
es5:
var ReactRtc = require('react-rtc');
es6:
import ReactRtc from 'react-rtc';
simple example:
const React = require('react')
const Rtc = require('react-rtc')
class Test extends React.Component {
constructor(props) {
super(props)
this.state = {
end : false
}
}
componentDidMount() {
setTimeout(()=>this.setState({end:true}),2000)
}
render() {
return (
<Rtc className="test"> Lorem </Rtc>
)
}
result:
first render:
<div class="test start"> Lorem </div>
after 5ms:
className="test main"
after 2000ms:
className="test end"
props:
propName|type|default|description :---|:--:|:--:|---: container|stringreact-class|div|the type of item (html tag or react-class) that wraps the nested content className|string||there are always classStart|string|start|present in className immediately after the component is mounted classMain|string|main|replaces classStart with className after the time specified in timeSwitch classEnd|string|end|replaces classMain with className when isEnd=true timerSwitch|number|5|delay before switching from start to main isEnd|boolean|false|status switch main in end
the remaining props are transferred to the container unchanged
you cannot change the state from main to start
you cannot change the state to end until it is moved to main
containers
you can use arbitrary html tags in the following way:
to use the built-in examples
const { Div, Span, A, Section} = require('react-rtc')
or create your own
<Rtc container="header" />
or:
class Header extends Rtc {
constructor(props) {
super(props)
this.container = 'header'
}
}