Get Started

Get Started

Create an account

You can start by creating your account on ScreenGrab.cloud

https://screengrab.cloud/login (opens in a new tab)

Login, create a project and get your api key for that project.

https://screengrab.cloud/dashboard/projects (opens in a new tab)

💡

Ensure the domain of the project matches the domain screengrab.js is used on in production.

Install ScreenGrab.js

ScreenGrab is available as a nodejs library screengrab.js that can be used in client side React or JS or in server side nodejs.

Install screengrab.js 1

For existing projects install the screengrab.js library into your project dependencies.

npm i --save screengrab.js

Examples (optional)

For examples of full projects clone the git repository https://github.com/screengrab-cloud/screengrab.js (opens in a new tab)

git clone https://github.com/screengrab-cloud/screengrab.js
cd screengrab.js/examples/nodejs
# cd screengrab.js/examples/react
npm install
npm run start

Look a the examples folder (opens in a new tab)

Test it out 2

const { ScreenGrab } = reqire("screengrab.js")
 
const screengrab = ScreenGrab('api-key')
 
screengrab.url('https://memezoo.app').grab()
 .then(image => console.log('image url', image.url))

Share a React component 3

You can use ScreenGrab directly in your React project.

share-button.tsx
import { ScreenGrab, Share } from "screengrab.js"
 
const screengrab = ScreenGrab('api-key')
 
export const ShareButton = (selector: string) => {
  const handleShare = async () => {
 
    // grab the selector screenshot
    // the url is set to the current page URL (window.location)
    // ensure the dev server is running if on localhost
    const photo = await screengrab.grab(selector)
 
    // open facebook share with photo url
    Share.share('facebook', photo.url)
    // instagram, telegram, whatsapp, 
    // twitter, linkedin, pinterest
    // more in examples
 
    // download the image directly
    // await Share.download(photo.url) 
  }
  return (
    <button onClick={handleShare}>Share</button>
  )
}

Use in a component like this:

sample-component.tsx
export const SampleComponent = () => {
  return (
    <div id="sample-component">
      <h1>Title</h1>
      <div>This is a sample component</div>
      <ShareButton selector="#sample-component" />
    </div>
  )
}
💡

Ensure the component you want to grab has an id eg: id="sample-component". You can also use a class selector to select the first component with that class.

You are good to go!

Back to https://screengrab.cloud (opens in a new tab)


Footnotes

  1. Install ScreenGrab.js

  2. Test is out.

  3. Integrate with React.