Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gorangajic/react-svg-morph
:crystal_ball: morph your svg component one into another other
https://github.com/gorangajic/react-svg-morph
Last synced: 3 months ago
JSON representation
:crystal_ball: morph your svg component one into another other
- Host: GitHub
- URL: https://github.com/gorangajic/react-svg-morph
- Owner: gorangajic
- License: mit
- Archived: true
- Created: 2015-10-31T00:18:34.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-12-11T20:22:45.000Z (about 6 years ago)
- Last Synced: 2024-09-29T00:44:09.620Z (4 months ago)
- Language: JavaScript
- Homepage: http://gorangajic.github.io/react-svg-morph/
- Size: 379 KB
- Stars: 824
- Watchers: 12
- Forks: 47
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-cn - react-svg-morph - morph your svg components one into another (Uncategorized / Uncategorized)
- awesome-react - react-svg-morph - morph your svg components one into another
- awesome-learning-resources - react-svg-morph - morph your svg components one into another (Uncategorized / Uncategorized)
- awesome-react - react-svg-morph - morph your svg component one into another other ` 📝 3 years ago` (React [🔝](#readme))
README
# React svg morph
> morph your svg components one into another
# 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
- it works with [react-icons](https://github.com/gorangajic/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 algorithm is adopted from https://github.com/alexk111/SVG-Morpheus.