{"id":13393203,"url":"https://github.com/gorangajic/react-svg-morph","last_synced_at":"2025-03-13T19:31:28.741Z","repository":{"id":44326710,"uuid":"45282726","full_name":"gorangajic/react-svg-morph","owner":"gorangajic","description":":crystal_ball: morph your svg component one into another other","archived":true,"fork":false,"pushed_at":"2018-12-11T20:22:45.000Z","size":388,"stargazers_count":829,"open_issues_count":16,"forks_count":47,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-02-20T14:51:33.453Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://gorangajic.github.io/react-svg-morph/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gorangajic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-31T00:18:34.000Z","updated_at":"2024-12-15T03:30:30.000Z","dependencies_parsed_at":"2022-09-02T14:51:37.021Z","dependency_job_id":null,"html_url":"https://github.com/gorangajic/react-svg-morph","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gorangajic%2Freact-svg-morph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gorangajic%2Freact-svg-morph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gorangajic%2Freact-svg-morph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gorangajic%2Freact-svg-morph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gorangajic","download_url":"https://codeload.github.com/gorangajic/react-svg-morph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243469147,"owners_count":20295695,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T17:00:46.309Z","updated_at":"2025-03-13T19:31:26.897Z","avatar_url":"https://github.com/gorangajic.png","language":"JavaScript","funding_links":[],"categories":["UI Components","Uncategorized","JavaScript","React [🔝](#readme)"],"sub_categories":["Component","Uncategorized"],"readme":"# React svg morph\n\n\u003e morph your svg components one into another\n\n\u003cimg src=\"https://rawgit.com/gorangajic/react-svg-morph/master/example.gif\" width=\"60\" alt=\"React Icons\"\u003e\n\n\n# Instalation\n\n```\nnpm install react-svg-morph --save\n```\n\n# Usage example\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { MorphReplace } from 'react-svg-morph';\n\nclass Checked extends React.Component {\n    render() {\n        return (\n            \u003csvg width=\"24\" fill=\"#00ea00\" height=\"24\" viewBox=\"0 0 24 24\"\u003e\n                \u003cpath d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\"/\u003e\n            \u003c/svg\u003e\n        );\n    }\n}\n\nclass CheckBox extends React.Component {\n    render() {\n        return (\n            \u003csvg width=\"24\" height=\"24\" fill=\"#666666\" viewBox=\"0 0 24 24\"\u003e\n                \u003cpath 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\"/\u003e\n            \u003c/svg\u003e\n        );\n    }\n}\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            checked: false\n        };\n    }\n    toggleChecked() {\n        this.setState({checked: !this.state.checked});\n    }\n    render() {\n        return (\n            \u003cdiv onClick={this.toggleChecked.bind(this)}\u003e\n                \u003cMorphReplace width={100} height={100}\u003e\n                    {this.state.checked ? \u003cChecked key=\"checked\" /\u003e : \u003cCheckBox key=\"checkbox\" /\u003e}\n                \u003c/MorphReplace\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('app'));\n```\n# Usage with react-native\n\n`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/\n\nEverything else is the same only you need to include `MorphReplaceNative` and `MorphTransitionNative` from `react-svg-morph/native`.\n\nFor now it works with normal svg tags/components like in example top.\n\n# API\n\n### \u0026lt;MorphReplace /\u003e or \u0026lt;MorphReplaceNative /\u003e\n\u003e when children element change it will morph from one svg element into another svg element\nProps:\n\n##### `width: Number`\nwidth of the svg element defaults to 40\n##### `height: Number`\nheight of the svg element defaults to 40\n##### `viewBox: String`\nviewBox of the svg element default to `0 0 ${width} ${height}`\n##### `duration: Number`\nswap animation duration in ms defaults to 350 ms\n##### `rotation: String`\nrotation of the animation available options are `clockwise`, `counterclock`, `none` defaults to _`clockwise`_\n##### `preserveAspectRatio: String`\nAttribute `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`.\n##### `easing: function`\neasing function, default easing is linear\n```javascript\n/*\n * Easing Functions - inspired from http://gizma.com/easing/\n * only considering the t value for the range [0, 1] =\u003e [0, 1]\n */\nvar easeInCubic = function(t) {\n    return t*t*t;\n}\n```\nthere is default easing functions already provided in `src/utils/easing` or `lib/utils/easing` so you can reuse them\n```\nimport {easeInQuint} from `lib/utils/easing`\n\u003cMorphReplace easing={easeInQuint}\u003e\n    {this.state.checked ? \u003cChecked /\u003e : \u003cCheckBox /\u003e}\n\u003c/MorphReplace\u003e\n\n```\n##### `children: React.Element`\nonly 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.\n\n\u003e every other props passed to the element will be passed to svg, so you can also pass normal svg attributes like `fill`,`opaticy`,`styles`...\n\n##### usage example\n\n```javascript\nimport {MorphReplace} from 'react-svg-morph';\n\nrender() {\n    return (\n        \u003cMorphReplace width={100} height={100}\u003e\n            {this.state.checked ? \u003cChecked key={'checked'} /\u003e : \u003cCheckBox key={'checkbox'}/\u003e}\n        \u003c/MorphReplace\u003e\n    )\n}\n```\n### \u0026lt;MorphReplaceResize /\u003e\n\u003e 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`\n\n### \u0026lt;MorphTransition /\u003e or \u0026lt;MorphTransitionNative /\u003e\n\n##### `width: Number`\nwidth of the svg element defaults to 40\n##### `height: Number`\nheight of the svg element defaults to 40\n##### `viewBox: String`\nviewBox of the svg element default to `0 0 ${width} ${height}`\n\u003e viewBox is ignored in react-native\n\n##### `progress: Number`\ncurrent progress of the svg animation, default to 0\n##### `rotation: String`\nrotation of the animation available options are `clockwise`, `counterclock`, `none` defaults to _`clockwise`_\n\u003e every other props passed to the element will be passed to svg, so you can passs normal svg attributes like `fill`,`opaticy`,`styles`...\n\n##### `children: Object{from: React.Element, to: React.Element}`\naccept two React elements that need to have svg element inside, it will morph one into another based on progress passed\n\n##### other props\nAll other props will be passed to the svg element\n\n##### usage example\n```\nimport {MorphTransition} from 'react-svg-morph';\n\nrender() {\n    return (\n        \u003cMorphTransition progres={50} width={100} height={100}\u003e\n            {from: \u003cLoveSvg /\u003e, to: \u003cLogoSvg /\u003e}\n        \u003c/MorphReplace\u003e\n    )\n}\n```\n\u003e it can be also used with `react-motion`\n\n\n## Related\n\n- it works with [react-icons](https://github.com/gorangajic/react-icons/) out of the box because they are all normalized to the same size\n\n## License\n\nMIT Copyright (c) Goran Gajic 2015\n\n## Credits\n\n\u003e svg convert algorithm is adopted from https://github.com/alexk111/SVG-Morpheus.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgorangajic%2Freact-svg-morph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgorangajic%2Freact-svg-morph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgorangajic%2Freact-svg-morph/lists"}