React svg morph

morph your svg components one into another other on web and react-native

Instalation

npm install react-svg-morph --save

Usage example

import React from 'react';
import ReactDOM from 'react-dom';
import { MorphReplace } from 'react-svg-morph';

class Checked extends React.Component {
    render() {
        return (
            <svg width="24" fill="#00ea00" height="24" viewBox="0 0 24 24">
                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
            </svg>
        );
    }
}

class CheckBox extends React.Component {
    render() {
        return (
            <svg width="24" height="24" fill="#666666" viewBox="0 0 24 24">
                <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/>
            </svg>
        );
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            checked: false
        };
    }
    toggleChecked() {
        this.setState({checked: !this.state.checked});
    }
    render() {
        return (
            <div onClick={this.toggleChecked.bind(this)}>
                <MorphReplace width={100} height={100}>
                    {this.state.checked ? <Checked /> : <CheckBox />}
                </MorphReplace>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

API

<MorphReplace /> or <MorphReplaceNative />

when children element change it will morph from one svg element into another svg element Props:

width: Number

width of the svg element defaults to 40

height: Number

height of the svg element defaults to 40

viewBox: String

viewBox of the svg element default to 0 0 ${width} ${height}

duration: Number

swap animation duration in ms defaults to 350 ms

rotation: String

rotation of the animation available options are clockwise, counterclock, none defaults to clockwise

easing: function

easing function, default easing is linear

/*
 * Easing Functions - inspired from http://gizma.com/easing/
 * only considering the t value for the range [0, 1] => [0, 1]
 */
var easeInCubic = function(t) {
    return t*t*t;
}

there is default easing functions already provided in src/utils/easing or lib/utils/easing so you can reuse them

import {easeInQuint} from `lib/utils/easing`
<MorphReplace easing={easeInQuint}>
    {this.state.checked ? <Checked /> : <CheckBox />}
</MorphReplace>

children: React.Element

only element you want to display need to be passed as children, when you replace that element with new one animation will be triggered

every other props passed to the element will be passed to svg, so you can also pass normal svg attributes like fill,opaticy,styles...

usage example

import {MorphReplace} from 'react-svg-morph';

render() {
    return (
        <MorphReplace width={100} height={100}>
            {this.state.checked ? <Checked /> : <CheckBox />}
        </MorphReplace>
    )
}

<MorphReplaceResize />

same as MorphReplace only you should use this when you have two svg elements that have different viewBox attributes so MorphReplaceResize will normalize their paths before passing it to MorphReplace

<MorphTransition /> or <MorphTransitionNative />

width: Number

width of the svg element defaults to 40

height: Number

height of the svg element defaults to 40

viewBox: String

viewBox of the svg element default to 0 0 ${width} ${height}

viewBox is ignored in react-native

progress: Number

current progress of the svg animation, default to 0

rotation: String

rotation of the animation available options are clockwise, counterclock, none defaults to clockwise

every other props passed to the element will be passed to svg, so you can passs normal svg attributes like fill,opaticy,styles...

children: Object{from: React.Element, to: React.Element}

accept two React elements that need to have svg element inside, it will morph one into another based on progress passed

usage example

import {MorphTransition} from 'react-svg-morph';

render() {
    return (
        <MorphTransition progres={50} width={100} height={100}>
            {from: <LoveSvg />, to: <LogoSvg />}
        </MorphReplace>
    )
}

it can be also used with react-motion check example

Related

• react-icons it work with react-icons out of the box because they are all normalized to the same size

Credits

svg convert algoritam is takan from https://github.com/alexk111/SVG-Morpheus and addapted