# @bigbinary/react-use-neeto-widget

> A React integration of neeto widgets powered by hooks.

Latest version **1.6.0** (published 2026-05-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @bigbinary/react-use-neeto-widget
pnpm add @bigbinary/react-use-neeto-widget
yarn add @bigbinary/react-use-neeto-widget
bun add @bigbinary/react-use-neeto-widget
```

## Health

**Score 50/100 (C)** — status: active.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 1.6.0 |
| Published | 2026-05-08 |
| First published | 2023-12-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=18.12 |
| Dependencies | 0 |
| Unpacked size | 407.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | BigBinary |
| Maintainers | neerajdotname, bigbinarybot, neetohq |

## Links

- npm: https://www.npmjs.com/package/@bigbinary/react-use-neeto-widget
- Repository: https://github.com/bigbinary/react-use-neeto-widget
- Homepage: https://github.com/bigbinary/react-use-neeto-widget#readme
- Issues: https://github.com/bigbinary/react-use-neeto-widget/issues
- npm.io page: https://npm.io/package/@bigbinary/react-use-neeto-widget

## Recent versions

- 1.6.0 (latest) — 2026-05-08
- 1.5.1 — 2026-04-17
- 1.5.0 — 2026-04-14
- 1.4.0 — 2026-04-07
- 1.3.1 — 2026-04-07
- 1.3.0 — 2026-04-07
- 1.2.1 — 2026-04-07
- 1.2.0 — 2026-04-07
- 1.1.0 — 2026-04-07
- 1.0.5 — 2024-01-11
- 1.0.4 — 2023-12-19
- 1.0.3 — 2023-12-18
- 1.0.2 — 2023-12-14

## README

# react-use-neeto-widget

A React integration of neeto widgets powered by hooks.

## Installation

```sh
yarn add @bigbinary/react-use-neeto-widget
```

## API

- [NeetoWidgetProvider](#neetowidgetprovider)
- [initializeNeetoWidget](#initializeNeetoWidget)
- [useNeetoWidget](#useneetowidget)

### NeetoWidgetProvider

Place the `NeetoWidgetProvider` as high as possible in your application. This
will make sure you can call `useNeetoWidget` anywhere.

#### Example

```jsx
import { NeetoWidgetProvider } from "@bigbinary/react-use-neeto-widget";

const App = () => {
  return (
    <NeetoWidgetProvider>
      <p>Hi there, I am a child of the NeetoWidgetProvider</p>
    </NeetoWidgetProvider>
  );
};
```

### initializeNeetoWidget

The `initializeNeetoWidget` method is used to initialize the global widget
instance. It requires a valid API key to embed the widgets. It accepts API key
(required) and widget configurations (optional) as parameters.

##### Widget configurations in neetoChat

| name           | type    | description                                                                                                                                                                                      |
| -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| visibleOnMount | boolean | The default value is `true`. If not set to `false`, there's no need to explicitly call the `showWidget` method, as the widget will be automatically set to the visible state after initialization. If the value is `false`, the widget will not be visible on initializing. You have to explicitly call the `showWidget` method.|

#### Example

```jsx
import { initializeNeetoWidget } from "@bigbinary/react-use-neeto-widget";

const NEETO_WIDGET_API_KEY = "your-neeto-widget-api-key";

useEffect(() => {
  initializeNeetoWidget(NEETO_WIDGET_API_KEY, {
    neetoChat: {
      visibleOnMount: false,
    },
  });
}, []);
```

### useNeetoWidget

`useNeetoWidget` hook is used to retrieve all methods bundled with neeto
widgets.

Make sure `NeetoWidgetProvider` is wrapped around your component when calling
`useNeetoWidget()`.

**Remark** - You can't use `useNeetoWidget()` in the same component where
`NeetoWidgetProvider` is initialized.

Currently, we expose the following methods to interact with neetoChat widget.
More methods will be added in future.

#### API

##### neetoChat

| name              | description                                                 |
| ----------------- | ----------------------------------------------------------- |
| showWidget        | Shows the Messenger                                         |
| hideWidget        | Hides the Messenger                                         |
| maximizeWidget    | Maximizes the Messenger                                     |
| minimizeWidget    | Minimizes the Messenger                                     |
| isWidgetShown     | Returns a boolean whether the Messenger is visible or not   |
| isWidgetMaximized | Returns a boolean whether the Messenger is maximized or not |

#### Example

```jsx
import React from "react";

import {
  NeetoWidgetProvider,
  useNeetoWidget,
  initializeNeetoWidget,
} from "@bigbinary/react-use-neeto-widget";

const App = () => (
  <NeetoWidgetProvider>
    <HomePage />
  </NeetoWidgetProvider>
);

const HomePage = () => {
  const { neetoChat } = useNeetoWidget();
  const {
    showWidget,
    hideWidget,
    maximizeWidget,
    minimizeWidget,
    isWidgetShown,
    isWidgetMaximized
  } = neetoChat;

  const NEETO_WIDGET_API_KEY = "your-neeto-widget-api-key";

  useEffect(() => {
    initializeNeetoWidget(NEETO_WIDGET_API_KEY);
  }, []);

  return (
    <>
      <button onClick={showWidget}>Show messenger</button>
      <button onClick={hideWidget}>Hide messenger</button>
      <button onClick={maximizeWidget}>Maximize messenger</button>
      <button onClick={minimizeWidget}>Minimize messenger</button>
      <button onClick={() => {alert("Is messenger visible? -> ", isWidgetShown)}}>
        Is messenger visible?
      </button>
      <button onClick={() => {alert("Is messenger maximized? -> ", isWidgetMaximized)}}>
        Is messenger maximized?
      </button>
    </>
  );
};
```

## Local development instructions
To test the changes in an application locally, follow the below steps. Let's test with the staging build of neetoChatWidget.

1. Update the value of the property `PUBLIC_PATH` in `.env.staging` of neetoChatWidget to point to the dist folder of the same project. You can also remove the `HONEYBADGER_API_KEY` from the `.env.staging` file and comment out the `HoneybadgerPlugin` initialization logic from `webpack.prod.js` file temporarily.

   eg: `http://127.0.0.1:5500/dist/`.
   You can use extensions like [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) to spin up a server from VSCode in neetoChatWidget and get the URL.
2. Run `yarn build-staging` to build the staging version of neetoChatWidget.
3. Update the `CHAT_WIDGET_SRC` property in the `.env.staging` file of `neeto-base-widget` to the build output of the neetoChatWidget and comment out the `gzipPlugin` from the plugins list in the `rollup.config.js` file.

   eg: `http://127.0.0.1:5500/dist/neeto-widget-chat.js`.
4. Run the command `yarn build-staging` in the neeto-base-widget.
5. Start a server as mentioned above in the neeto-base-widget and obtain the URL to the dist folder.
6. Set the value of `NEETO_BASE_WIDGET_SRC` in `src/constants.js` of react-use-neeto-widget pointing to the server serving the neeto-base-widget dist folder.
   eg: `http://127.0.0.1:5501/dist/neeto-widget-staging.js`
7. Run the command `yarn bundle` in the react-use-neeto-widget and then run `yalc publish`.
8. Add the package to the application you want to test using the command `yalc add @bigbinary/react-use-neeto-widget`.

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