screen-snip v1.0.0

screen-snip

Examples

import logo from './logo.svg';
import './App.css';
import {ScreenSnip} from 'screen-snip'
import { useState } from 'react';

function App() {
  const [images, setImages] = useState([])

  const handleScreenCapture = screenCapture => {
    setImages([...images, screenCapture])
  };
  return (
    <ScreenSnip endCapture={handleScreenCapture}>
      {({ capture }) => (
        <div>
          <button onClick={capture}>Snap</button>

          <div style={{ display: "flex" }}>

            <img src="/Img/dog_1.png" alt="" />
            <img src="/Img/cat1.png" alt="" />
            <img src="/Img/cat.png" alt="" />


          </div>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat, iusto
            repellat quae quos in rerum sunt obcaecati provident placeat hic saepe
            possimus eaque repellendus consequuntur quisquam nihil, sit ullam
            ratione.
          </p>
          <div id="content">
            <h3>Hello, this is a H3 tag</h3>

            <p>A paragraph</p>
          </div>
          <div id="editor"></div>
          <center>
            <div id="divToPrint" style={{display:"flex", justifyContent:"space-between"}}>
              {images.map((image) => (
                <img src={image} alt='react-screen-capture' />
              ))}
            </div>

            <p>
              {images && <button>Download</button>}
            </p>
          </center>
        </div>
      )}


    </ScreenSnip>
  );
}

export default App;

Usage

import {ScreenSnip} from 'screen-snip'

After importing ScreenSnip use the methods capture and endCapture showing in the example above

⚖️ License

The MIT License