react-elfsight-widget

The package provides a component that helps smoothly integrate an Elfsight widget into a React app.

Please note that to use it you need an Elfsight account and a widget created and configured.

Getting Started

Installation

npm i react-elfsight-widget

Usage

import { ElfsightWidget } from 'react-elfsight-widget';

function MyComponent() {
  <ElfsightWidget widgetId={/* replace with a widget id */} lazy />;
}

In case you need any assistance, please contact support.

Props

widgetId

Widget identifier.

How to get a widget identifier from an installation code?

Let's take a look at an arbitrary installation code.

<script src="https://static.elfsight.com/platform/platform.js" defer></script>
<div class="elfsight-app-85d18ddb-c202-421e-9a88-6c099d7a7833"></div>

At the second line we can see a div element with a long class name: elfsight-app-85d18ddb-c202-421e-9a88-6c099d7a7833, where 85d18ddb-c202-421e-9a88-6c099d7a7833 is the widget identifier.

So, in order to obtain a widget identifier you need'll to take it's class name and strip elfsight-app- prefix.

lazy

Enables lazy loading. Accepts boolean or string (useful when you want to specify a lazy loading mode). If no mode is specified then a widget will be loaded either once it's in the viewport or after user's first activity.

Modes:

• first-activity — in this mode a widget will be loaded once a user commits first activity (moves mouse, scrolls page, etc.); appearing in the viewport is ignored.
• in-viewport — widget will be loaded once it's in the viewport; users activity is ignored.

className and other props and attributes

Also you can pass any prop that standard div element accepts such as className, id, style and others. All these props will be forwarded to a widget container div element.