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

name	type	default	Required	description
singularKey	String		Required	The library will make sure you always have only one SingularComponent with that key
singularPriority	Number		Required	The library will keep only the one with the lower priority for every common singularKey
children	React element			The element itself you want to keep single
animationDuration	Number	500		Miliseconds duration
animationTrigger	Any	0		Any input that when change will trigger an animation of the component, useful for cases when we want to animate the component when a state outside the scope of the component is changed. For example if a sibling component is moved and it will affect the component location, we can give the component as trigger its number of brothers.
onAnimationBegin	(originalElement, animationElement) => void			callback when the animation begins
onAnimationComplete	(originalElement) => void			Callback when the animation ends
customTransitionElement	React element	The previous element will be taken		You can use it to replace the element that transitioned from one element to another
easing	'linear', 'easeInQuad', 'easeOutQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart', 'easeInQuint', 'easeOutQuint', 'easeInOutQuint', 'easeInElastic', 'easeOutElastic', 'easeInOutElastic', 'easeInSin', 'easeOutSin', 'easeInOutSin'	'easeOutQuad'		The name of the easing formula that will be used. See here: https://easings.net/ .
useStyleAnimation	Boolean	false		when true animation will use width, height and fontSize to animate dimensions, instead of transform: scale. this can be useful in a lot of cases, for example when height and width ratio changes
customAnimationHandlers	['width','height','fontSize', 'color', 'backgroundColor', 'borderColor', 'borderRightColor', 'borderLeftColor', 'borderTopColor', 'borderBottomColor', 'borderWidth', 'borderRightWidth', 'borderLeftWidth', 'borderTopWidth', 'borderBottomWidth', 'padding', 'paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom', 'opacity', (element, valueFormula, startSnapshot, targetSnapshot, snapshotTrack) => void]			choose your own animation (which will be added to the position animation), provide your array of changes in addition to existing style animation. provide an array of supported styles you want to animate, in addition to your own custom function to animate yet unimplemented styles or more advance animation. customAnimationHandler get as arguments: - element: the animated element to change. - valueFormula: (startValue(number), endValue(number)) => currentValue(number), use the targetSnapshot and endSnapshot to choose calculate the values of the styles you want to animate - startSnapshot: contains rect(getBoundingClientRect) and style(getComputedStyle) of element before the animation started - targetSnapshot: same as startSnapshot but of the element end state of the animation - snapshotTrack: update this object with the styles you used and updated in the element. for example when using snapshot.style.width and we calculate new width, we will set snapshotTrack.style.width = element.style.width = calculated width. this is used for continousAnimation which enables animating from the middle of another animation without the element jumping from place to place. ~~~snapshots explained~~~ startSnapshot belongs to the instance of the component we animating from and target snapshot belongs to the instace of the component we are animating to
extraSnapshotStyleAttributes	Array of style attributes in camelCase	[]		Add the given style attributes to the style snapshot they will be joined with the customAnimtionHandlers provided by their name ('width', 'fontSize'...). use this when you make your own customAnimationHandler and the given snapshot isnt enough. ( copying all the styles to the snapshot is to heavy )
continuousAnimation	Boolean	true		When true, if the component starts a new animation in the middle of an ongoing one, the component will animate from its current postion and not from its last position. making sure the animation will continue and the component won't jump when starting a new animation. (when reffering to position, this includes the whole snapshot). if you use your own animation handler and you dont update the snapshotTrack, you will want to set this prop to false

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