# React svg morph > morph your svg components one into another React Icons

# Instalation ``` npm install react-svg-morph --save ``` # Usage example ```javascript import React from 'react'; import ReactDOM from 'react-dom'; import { MorphReplace } from 'react-svg-morph'; class Checked extends React.Component { render() { return ( ); } } class CheckBox extends React.Component { render() { return ( ); } } class App extends React.Component { constructor(props) { super(props); this.state = { checked: false }; } toggleChecked() { this.setState({checked: !this.state.checked}); } render() { return (

{this.state.checked ? : }

); } } ReactDOM.render(, document.getElementById('app')); ``` # Usage with react-native `react-svg-morph` only works on ios because react native art package is [only available there](https://facebook.github.io/react-native/docs/known-issues.html). 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](https://developer.mozilla.org/en/docs/Web/SVG/Attribute/preserveAspectRatio). Default value is `xMidYMid meet`. ##### `easing: function` easing function, default easing is linear ```javascript /* * 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` {this.state.checked ? : } ``` ##### `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 ```javascript import {MorphReplace} from 'react-svg-morph'; render() { return ( {this.state.checked ? : } ) } ``` ### <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 ( {from: , to: } ) } ``` > it can be also used with `react-motion` ## Related - [react-icons](https://github.com/gorangajic/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

	Stars	Issues	Version	Updated	Created
react-art	227,561	815	18.3.1	5 months ago	11 years ago
react-hooks-svgdrawing	199	36	2.1.2	4 years ago	5 years ago
react-svg-morph	824	16	0.2.1	7 years ago	9 years ago

react-art vs react-hooks-svgdrawing vs react-svg-morph

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past