react-singular-component v8.1.5
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
3 years ago
3 years ago
4 years ago
4 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago