React web scraper component

A lightweight component that are using our scraping API for getting full HTML content from a given URL. The component is fully customizable and will require a callback function that renders the HTML.

Demo of the widget

A demo with custom colors and a simple Copy to clipboard button. Implementation is shown below.

Another demo

In this demo, the widget is default design and the callback function is with limited design effor :)

Usage

In below sections, we will show some examples of how we can configure the component for our needs and design

Download

npm i reactjs-scraper

All available props

interface IReactScraper {
  renderFn: (content: string) => any;
  animationColor?: string;
  buttonStyle?: any;
  inputStyle?: any;
  errorStyle?: any;
  buttonText?: string;
  placeholder?: string;
}

The renderFn is the only required prop and it should be a function that takes the content in as the arguments. The rest is optional.

Basic usage

Below example is the one from the demo

import { ReactScraper } from "reactjs-scraper";

<ReactScraper
  renderFn={(content: string) => (
    <>
      <h3>Response:</h3>
      <div
        style={{
          height: "200px",
          width: "420px",
          overflow: "scroll",
          marginTop: "12px",
        }}
      >
        {content}
      </div>
    </>
  )}
/>;

Custom styling

Following code will result in the component looking like this:

And the code should be as follows.

NOTE We are using our reactjs-loading-button in this example, check it out if you are in need of a button with loading animations.

import { ReactScraper } from "reactjs-scraper";
import { LoadingButton } from "reactjs-loading-button";

const renderButton = () => (
  <LoadingButton
    loadingMode="SPINNER"
    onClick={() => {
      navigator.clipboard.writeText(content).then(() => alert("HTML copied"));
    }}
    isLoading={false}
    text="Copy HTML"
    buttonStyle={{
      fontWeight: "bold",
      backgroundColor: "#da6868",
      color: "white",
    }}
  />
);

<ReactScraper
  placeholder="Type in the URL"
  buttonText="Crawl"
  animationColor="#fff"
  buttonStyle={{
    backgroundColor: "#5588c8",
  }}
  renderFn={renderButton}
/>;

Feedback

Is something missing? Not working? Or any feature requests? Just email us, we love to improve our software. Email can be found here.