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).
npm install react-singular-component -S
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.
| 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 |
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.
view the changelog here