https://github.com/drgx/react-thanos-snap
React component for creating Thanos infinity gauntlet fade effect for you react component!
https://github.com/drgx/react-thanos-snap
avengers awesome html2canvas infinity-gauntlet javascript npm-package popmotion react react-component-library react-components thanos
Last synced: 2 months ago
JSON representation
React component for creating Thanos infinity gauntlet fade effect for you react component!
- Host: GitHub
- URL: https://github.com/drgx/react-thanos-snap
- Owner: drgx
- License: mit
- Created: 2019-05-17T10:28:19.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-09-26T08:29:40.000Z (over 3 years ago)
- Last Synced: 2025-01-21T05:47:29.888Z (3 months ago)
- Topics: avengers, awesome, html2canvas, infinity-gauntlet, javascript, npm-package, popmotion, react, react-component-library, react-components, thanos
- Language: JavaScript
- Homepage: https://codesandbox.io/s/reactthanossnap-demo-3q171?fontsize=14
- Size: 36.2 MB
- Stars: 38
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
React Thanos Snap
Giving you the ability to easily converting your React components into dust with a single snap!
Inspired the amazing Marvel Avenger movies and Google Thanos ester egg.
# How to use it 📦
Add this package to your react app project
## NPM
`npm install react-thanos-snap`
## Yarn
`yarn add react-thanos-snap`
## Usage ⚙️
Simply wrap your component with the `react-thanos-snap` component. And set the `snap` props!
This packages also have the ability to restoring back your components by changing the `snap` to `false`.
```js
import React, { useState } from 'react';
import InfinityGauntlet from 'react-thanos-snap';
function App(props) {
const [snap, setSnap] = useState(false);
return (
{/** Put your components here **/}
setSnap(!snap)}>Snap❗️
);
}
```
## Preview
# Limitation
- The components will be wrap with the div that have `position: relative;` style on it.
- We use `html2canvas`. This library have the limitation that can not render the image outside the origin because of the content policy restriction from the browser. if you wish to render image outside your origin, please read kindly use [proxy](http://html2canvas.hertzen.com/proxy/);. This component have the `options.proxy` props so you can add the proxy on that props.
# Credit
- The idea of this project also comes from [red stappler tutorial](https://redstapler.co/thanos-snap-effect-javascript-tutorial/). I porting the logic to the react and use some modification on the animation. So super thanks to the [red stapper](https://redstapler.co) for creating the great tutorial!
- The Amazing infinity gauntlet logo image for this repo is owned by [Jamie Ferrato](https://dribbble.com/shots/4595136-Infinity-Gauntlet). I own no rights to the image.
# Contributing
I ❤️ to have your helping on react-thanos-snap project! Feel free to PR's, add issues or give feedback! Enjoy your mighty power 😎
# License
MIT