SingularComponent

Move your react component around the dom

Click Here For Live Example!!!!!!!!

Transition from one component to another component seamlessly. Use this for better user exprience, helping them understand its the same component. Just wrap your components with the SingularComponent, give them the same singularKey, and a singularPriority to choose which one of them to show(higher priority will show the componenet).

Install

npm install react-singular-component -S

Usage

Here is a component (using semantic ui react) from the example project:

import SingularComponent from 'react-singular-component';

class SingularSearch extends Component{

    render(){
        const {singularPriority, style, value, onChange} = this.props;

        return <SingularComponent singularKey="SingleInput" singularPriority={singularPriority}>
            <Input icon="search" value={value} style={style} onChange={onChange} />
        </SingularComponent>;
    }
}

I will render the SingularSearch component twice once with a singularPriority of 1 and once with a singularPriority of 2. while i render both we will only see the instance with a priority of 2, but i will unmount the higher priority instance the component will move and change to the position and size of the lower priority instance.

Props

Contribute

Simply fork and clone

npm install
npm start

and you're ready to go and make whatever changes you have in mind

Please note this is only the start of the this project there is a lot to add. This is a concept I want to push forward and needs work.

Changelog

view the changelog here