# react-elfsight-widget

> The right way to add Elfsight Widget to your React App

Latest version **1.1.2** (published 2025-02-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-elfsight-widget
pnpm add react-elfsight-widget
yarn add react-elfsight-widget
bun add react-elfsight-widget
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2025-02-21 |
| First published | 2021-01-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 25.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Vladimir Ivanenko |
| Maintainers | welcomemax, d521bb85 |

## Links

- npm: https://www.npmjs.com/package/react-elfsight-widget
- Repository: https://github.com/d521bb85/react-elfsight-widget
- Issues: https://github.com/d521bb85/react-elfsight-widget/issues
- npm.io page: https://npm.io/package/react-elfsight-widget

## Recent versions

- 1.1.2 (latest) — 2025-02-21
- 1.1.1 — 2023-04-26
- 1.1.0 — 2023-04-26
- 1.0.3 — 2022-09-06
- 1.0.2 — 2022-07-28
- 1.0.0 — 2021-01-22

## README

# react-elfsight-widget

[![npm](https://img.shields.io/npm/dm/react-elfsight-widget)](https://www.npmjs.com/package/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](https://elfsight.com/) account and a widget created and configured.

## Getting Started

### Installation

```sh
npm i react-elfsight-widget
```

### Usage

```tsx
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](https://help.elfsight.com/).

## Props

### widgetId

Widget identifier.

<details>
  <summary>How to get a widget identifier from an installation code?</summary>
  
  Let's take a look at an arbitrary installation code.
  ```html
  <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.
</details>

### 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.

---
_Source: https://npm.io/package/react-elfsight-widget · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._