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.
npm i react-elfsight-widgetimport { ElfsightWidget } from 'react-elfsight-widget';
function MyComponent() {
<ElfsightWidget widgetId={/* replace with a widget id */} lazy />;
}In case you need any assistance, please contact support.
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.
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.
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.