react-svg-morph
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/react-svg-morph package

    0.2.1 • Public • Published

    React svg morph

    morph your svg components one into another

    React Icons

    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 key="checked" /> : <CheckBox key="checkbox" />}
                    </MorphReplace>
                </div>
            );
        }
    }
     
    ReactDOM.render(<App />, document.getElementById('app'));

    Usage with react-native

    react-svg-morph only works on ios because react native art package is only available there. Before getting started you will need to include ReactNativeArt into your project, there is good example how to do that on this link http://browniefed.com/blog/2015/05/03/getting-react-art-running-on-react-native/

    Everything else is the same only you need to include MorphReplaceNative and MorphTransitionNative from react-svg-morph/native.

    For now it works with normal svg tags/components like in example top.

    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

    preserveAspectRatio: String

    Attribute preserveAspectRatio indicates whether or not to force uniform scaling. For available options look here. Default value is xMidYMid meet.

    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. It's important to provide key prop to child element so MorphReplace know when child is changed.

    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 key={'checked'} /> : <CheckBox key={'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

    other props

    All other props will be passed to the svg element

    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

    Related

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

    License

    MIT Copyright (c) Goran Gajic 2015

    Credits

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

    Install

    npm i react-svg-morph

    DownloadsWeekly Downloads

    717

    Version

    0.2.1

    License

    MIT

    Last publish

    Collaborators

    • avatar