react-trc

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	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} = require('react-rtc')

or create your own

<Rtc container="header" />

or:

class Header extends Rtc {
  constructor(props) {
    super(props)
    this.container = 'header'
  }
}