reactswitch v0.1.7

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:

Properties on the sub-components:

CSS classes:

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>