react-rtc
simple react-transition for change classNames
installation:
npm install react-rtc
import:
es5:
var ReactRtc = ;
es6:
;
simple example:
const React = const Rtc = Component { superprops thisstate = end : false } { } { return <Rtc className="test"> Lorem </Rtc> }
result:
first render:
Lorem
after 5ms:
className="test main"
after 2000ms:
className="test end"
props:
propName | type | default | description |
---|---|---|---|
container | string react-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 =
or create your own
<Rtc container="header" />
or:
{ superprops thiscontainer = 'header' }