open-index/open-npm huggingface dataset:
npm package: @lassi/glass
Description: Add Glass effects to HTML elements
Author: Lasindu Nuwanga
Latest version: 1.0.0

# GLASS

<br />

## Add a shining glass effect to elements in your web page

There are two files you need to add to your web page in order to get effects

1. glass.css
2. glass.js

<br />

## You can get these two files through npm

### To install in current project (folder)

```
$ npm install @lassi/glass
$ npm install
```

### To install gloabally then add to project

```
$ npm install -g @lassi/glass
$ npm install @lassi/glass
$ npm install
```

you can find two files in `node_modules/glass` folder
<br />
`glass.js` needs JQuery support. Please add JQuery to your webpage before adding `glass.js`

<br />

## How to use

Check the example in `sample` folder

1. Add css class `glass` to an element for default glass effect
2. Modify default effect by adding fallowing attributes

- `data-shining-color` : Change the color of shine. This value can be a rgb, rgba function, color name or a # code
- `data-shining-duration` : Change the duration of shining effect. Can be seconds (s) or miliseconds (ms)
- `data-shining-opacity` : Change the opacity of the shine. Must be a value between 1 and 0

<br />
<br />
<br />
That's all for now. This is my first package distribution and I hope this effort will make your playground more easier. Please let me know your ideas about this 🙂
npm package: @lassoapp/widget
Description: Drop-in React component for Lasso feedback widget
Latest version: 0.1.0

# @lassoapp/widget

Drop-in React component for the [Lasso](https://trylasso.dev) feedback widget.

## Installation

```bash
pnpm add @lassoapp/widget
```

## Next.js (App Router)

Add `<Lasso />` to your root layout. It renders no visible UI until opened by users.

```tsx
import { Lasso } from "@lassoapp/widget";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Lasso apiKey="proj_xxx" />
      </body>
    </html>
  );
}
```

## React

Render `<Lasso />` once in your top-level app shell.

```tsx
import { Lasso } from "@lassoapp/widget";

export function App() {
  return (
    <>
      {/* your app */}
      <Lasso apiKey="proj_xxx" />
    </>
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `apiKey` | `string` | *required* | Your project's API key |
| `projectId` | `string` | `undefined` | Legacy alias for `apiKey` |
| `theme` | `'light' \| 'dark' \| 'auto'` | `'auto'` | Widget color theme |
| `endpoint` | `string` | `auto` | Optional API base. If omitted, inferred from widget runtime origin |
| `scriptUrl` | `string` | `'https://trylasso.dev/widget.js'` | Optional runtime override for self-hosted/advanced setups |

## How It Works

1. Loads the widget runtime (`https://trylasso.dev/widget.js` by default)
2. Calls `window.Lasso.init()` with your configuration
3. Cleans up on unmount via `window.Lasso.destroy()`
4. SSR-safe — only runs on the client
5. Runtime script is loaded once regardless of re-renders