Add proxy and update readme

Author: Ryan Nixon Salim

readme.md

@@ -31,29 +31,29 @@ 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>
  );
 }
 ```
 
 # 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/);
+- 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.
 
-# License
+# Contributing
 
-MIT
+I ❤️ to have your helping on react-thanos-snap project! Feel free to PR's, add issues or give feedback! Enjoy your mighty power 😎
 
-# Contributing
+# License
 
-I ❤️ to have your helping hand on react-thanos-snap project! Feel free to PR's, add issues or give feedback! Enjoy your mighty power 😎
+MIT

src/components/InfinityGauntlet.js

@@ -37,13 +37,13 @@ const OriginalElement = posed.div({
  },
 });
 
-function handleSnap(imgRef, particleRefs, setState, snap, seParticleVisibility) {
+function handleSnap(imgRef, particleRefs, setState, snap, seParticleVisibility, proxy) {
  seParticleVisibility(true);
  if (!snap) {
  setState('visible');
  } else {
  if (imageDataArray.length === 0) {
- html2canvas(imgRef.current, { scale: 1, backgroundColor: null })
+ html2canvas(imgRef.current, { scale: 1, backgroundColor: null, proxy })
  .then((canvas) => {
  const w = canvas.width;
  const h = canvas.height;
@@ -78,6 +78,15 @@ function handleSnap(imgRef, particleRefs, setState, snap, seParticleVisibility)
  }
 }
 
+InfinityGauntlet.defaultProps = {
+ style: {},
+ snap: false,
+ options: {
+ zIndex: 2,
+ proxy: null,
+ },
+};
+
 function InfinityGauntlet(props) {
  const { options, snap, style = {} } = props;
  const wrapperRef = useRef();
@@ -89,7 +98,7 @@ function InfinityGauntlet(props) {
  const canvases = generateBlankCanvas(particleRefs, state, canvasCount, zIndex);
 
  useEffect(() => {
- handleSnap(wrapperRef, particleRefs, setState, snap, seParticleVisibility);
+ handleSnap(wrapperRef, particleRefs, setState, snap, seParticleVisibility, options.proxy);
  }, [snap]);
 
  return (
@@ -102,11 +111,10 @@ function InfinityGauntlet(props) {
  }
  }}
  ref={wrapperRef}
- style={{ position: 'absolute', zIndex }}
+ style={{ position: 'absolute', zIndex, width: '100%' }}
  >
  {props.children}
  </OriginalElement>
-
  <CanvasContainer style={{ display: particleVisibility ? 'block' : 'none' }} key={1} pose={state}>
  {canvases}
  </CanvasContainer>