Skip to content

React component for creating Thanos infinity gauntlet fade effect for you react component!

License

Notifications You must be signed in to change notification settings

drgx/react-thanos-snap

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

Edit react-thanos-snap demo

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.

import React, { useState } from 'react';
import InfinityGauntlet from 'react-thanos-snap';

function App(props) {
  const [snap, setSnap] = useState(false);
  return (
    <div>
      <InfinityGauntlet snap={true}>{/** Put your components here **/}</InfinityGauntlet>
      <button onClick={() => setSnap(!snap)}>Snap❗️</button>
    </div>
  );
}

Preview

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;. 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. I porting the logic to the react and use some modification on the animation. So super thanks to the red stapper for creating the great tutorial!

  • The Amazing infinity gauntlet logo image for this repo is owned by Jamie Ferrato. 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