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>