reactswitch

ReactSwitch Demo

Viwer switch to switch views between two react components without remounting them. This component can avoid performance issue when using transitions on components with large data to calculate.

Introduction:

The ReactSwitch is concepted to have two states, 'Off' and 'On', to switch between. It accepts only two sub-components to display, which correspond to these two states. Once the ReactSwitch is mounted, the 'Off' state will always be displayed as the default state. However, it is possible to explicitly define the correspondances between states and sub-components. A button with title is provided as the trigger of the switching of the state.

Why Use ReactSwitch?

Firstly, the ReactSwitch is a react component with transitions implemented by using pure CSS properties, which does not require extra re-mounting of sub-components. This makes it easy for users to realize effects for switching without adding logics on sub-components to avoid the performance issues. Secondly, The component is functional with some basic uses of props, this saves you the works of javascript or css coding by your own. Thirdly, the switch does not require fixed size for its sub-components. It can adapt to the real sizes of the sub-components, therefore, the resulting contents will work well with responsive design.

How-to Install?

npm install reactswitch

How-to Use?

The ReactSwitch has default parameters for basic usage, however, it can also be configured by props and CSS files. Like many of the react components, the ReactSwitch can take into account some properties. Apart from the default CSS styles and trainsitions, it is also possbile to achieve customized tranistions by override the default styles.

To use the component, you can at first import the component:

import ReactSwitch from "reactswitch";

And then, you can take the default css file from ./dist/public/css/ or override it and include in the project by javascript:

import "patch/to/react-switch.css";

or include in the page head:

<link rel="stylesheet" type="text/css" href="patch/to/react-switch.css">

As for the icons displayed in the button, it is necessary to import the corresponding style file and then you can use the right classes such as followed (take fontawsome for example):

<link rel="stylesheet" type="text/css" href="patch/to/icon.css">

<ReactSwitch 
 ...
 offStateIcon="fa fa-arrow-up" onStateIcon="fa fa-arrow-down"
 ...
 />

Properties on the ReactSwitch:

Component property	Type	Mandatory	Default	Description
offStateTitle	any	Yes		The title when the switch is 'Off', it can be a string or an even a react element ...
onStateTitle	any	Yes		The title when the switch is 'On', same as above
offStateIcon	string	No		The icon when the switch is 'Off', this requires the icon resouce installed
onStateIcon	string	No		The icon when the switch is 'On', this requires the icon resouce installed
heightAnimationMode	bool	No	false	A predefined animation with trainsition of height, can be used together with 'fadeOutAnimationMode'. With this option on, the switch provides a transition of heights on both states.
fadeOutAnimationMode	bool	No	false	A predefined animation with effect of fading out, can be used together with 'heightAnimationMode'. With this option on, the switch provides a transition of opacity on the next state to display.
buttonProps	object	No		All the properties for the button can be provided here, can be used for customization purpose

Properties on the sub-components:

Component property	Type	Mandatory	Default	Description
default	bool	No		This associates the sub-component to the 'Off' state, it can only be assigned to one of the sub-component. If neither of the sub-component uses this prop, the ReactSwitch will take the first one as the default one and associate it to the 'Off' state.

CSS classes:

Appliable classes	Description of applied element
react-switch-shown	The diplayed state
react-switch-hidden	The hidden state
react-switch-height-animation	The animiation properties
react-switch-fade-out-animation	The animiation properties
react-switch-height-and-fade-out-animation	The animiation properties
react-switch-shown	The button
react-switch-button:hover	Hover properties for the button
react-switch-button-title	Button title
react-switch-button-on-state-title	Button title when in 'On' state
react-switch-button-off-state-title	Button title when in 'Off' state
react-switch-on-state	The 'On' state
react-switch-off-state	The 'Off' state
react-switch-icon	The icon

Examples:

A mininum usage is as followed:

    <ReactSwitch offStateTitle={"Read More"} onStateTitle={"Close"} heightAnimationMode>
        <div>
        To read hidden information, you must ...
        </div>
        <div>To read hidden information, you must click on 
        the button 'Read More'. This is a simple demonstration of the 'React Switch' component.
        with more data<br/>
        with much more data	
        with more data<br/>
        with much more data
        </div>
    </ReactSwitch>

A more complexed usage can be:

	handleClick(){
		alert("An external action is executed");
	}
    
    <ReactSwitch onStateTitle="Read More"
    offStateTitle="Close"
    offStateIcon="fa fa-arrow-up"
    onStateIcon="fa fa-arrow-down" 
    heightAnimationMode
    fadeOutAnimationMode
    buttonProps={{className:"custom-button", onClick:this.handleClick.bind(this)}}
    >
        <p >To read hidden information, you must ...</p>
        <p default>To read hidden information, you must click on 
        the button 'Read More'. This is a simple demonstration of the 'React Switch' component.</p>
    </ReactSwitch>