open-index/open-npm huggingface dataset:
npm package: @kauabunga/react-portal-popover
Description: Popover for React using portals
Author: Josh Barr
Latest version: 0.2.7

# react-portal-popover
[![npm](https://img.shields.io/npm/v/react-portal-popover.svg)](https://www.npmjs.com/package/react-portal-popover) [![Build Status](https://travis-ci.org/springload/react-portal-popover.svg?branch=master)](https://travis-ci.org/springload/react-portal-popover) [![Dependency Status](https://david-dm.org/springload/react-portal-popover.svg)](https://david-dm.org/springload/react-portal-popover) [![devDependency Status](https://david-dm.org/springload/react-portal-popover/dev-status.svg)](https://david-dm.org/springload/react-portal-popover#info=devDependencies) [![Code Climate](https://codeclimate.com/github/springload/react-portal-popover/badges/gpa.svg)](https://codeclimate.com/github/springload/react-portal-popover)

A popover library for React, using [react-portal](https://github.com/tajo/react-portal) for better positioning.

## Installation

```
npm install react-portal-popover
```

## Usage

There's two steps: import the `OverlayTrigger` that decorates your toggle element,
then pass in an `overlay={}` prop with your `ToolTip` that you'd like to display.

```js
import React from 'react';
import ToolTip, { OverlayTrigger } from 'react-portal-popover';

const MyComponent = () => {
  const options = {
    size: 7,
    color: '#999',
    foregroundColor: '#fff',
    className: 'my-special-tooltip',
    useForeground: true,
  };

  const toolTip = (
    <ToolTip position="bottom" options={options}>
      <p>My tooltip content</p>
    </ToolTip>
  );

  return (
    <div>
      <OverlayTrigger overlay={toolTip} label="Excerpt" showLabel="Show" hideLabel="Hide">
        <button>Toggle</button>
      </OverlayTrigger>
    </div>
  );
};
```

### Configuration options

There are some options you can pass to the `ToolTip` component to customise how
it is displayed. This allows you to define multiple styles of tooltip in the same
application, and saves writing lots of the CSS boilerplate required for drawing arrows.

```js
const options = {
  classBase: 'tooltip',     // eg .${classBase}--bottom,
  className: '',            // extra classnames to add to the tooltip element
  size: 7,                  // the size of the arrow
  offset: 2,                // how many pixels to offset the arrow by
  color: '#999',            // border colour of your tooltip
  foregroundColor: '#fff',  // foreground colour of your tooltip
  useForeground: true,      // render two arrows, a border and a background.
  borderWidth: 1,           // pixel width of your border
};

<ToolTip position="bottom|top|left|right" options={options} />
```


### OverlayTrigger options

`closeOnScroll` determines whether the tooltip closes when you scroll the window.

```
<OverlayTrigger closeOnScroll={true|false} />
```

## Developing

```sh
nvm install
npm install
```

## Running tests

```js
npm test
npm run test:watch
npm run lint
```
npm package: @kaue_developer/socialkit
Description: Utilitários essenciais para construção de redes sociais: validação de dados, geração de avatares aleatórios e criação de perfis falsos para testes.
Author: Kauê Barreto Benicio
Latest version: 1.0.0

# social-kit-npm-package
Pacote npm da Social Kit: Utilitários para construção de redes sociais
npm package: @kaumlaut/pure
Description: Types and functions for a state runtime inspired by Elm and functional programming
Author: Max Kaemmerer
Latest version: 2.3.0

# @kaumlaut/pure

![example workflow](https://github.com/maxkaemmerer/pure/actions/workflows/node.js.yml/badge.svg)

Types and functions for a state runtime inspired by Elm and functional programming

- [API Reference](https://maxkaemmerer.github.io/pure/)
npm package: @kaungkhantdev/create-nestjs-api
Description: CLI to scaffold NestJS API starter with Prisma, JWT auth, and Swagger
Author: Kaung Khant Zaw
Latest version: 1.1.2

# create-nestjs-api

CLI to scaffold a NestJS API starter with Prisma, JWT authentication, and Swagger.

## Usage
```bash
npx @kaungkhantdev/create-nestjs-api my-app
```

## What's Included

- NestJS 11
- Prisma ORM with PostgreSQL
- JWT Authentication
- Swagger API Documentation
- Class Validator & Transformer
- Jest Testing Setup
- ESLint + Prettier

## Quick Start
```bash
# Create new project
npx @kaungkhantdev/create-nestjs-api my-app

# Navigate to project
cd my-app

# Install dependencies
npm install

# Setup environment
cp .env.example .env
# Edit .env with your database credentials and JWT secret

# Run Prisma migrations
npm run prisma:migrate:deploy

# Generate Prisma client
npm run prisma:generate

# Start dev server
npm run start:dev
```

The API will be available at:
- Application: `http://localhost:3000`
- Swagger Documentation: `http://localhost:3000/api`

## Links

- [Template Repository](https://github.com/kaungkhantdev/nestjs-api-starter)
- [Report Issues](https://github.com/kaungkhantdev/create-nestjs-api/issues)

## License

MIT
npm package: @kaungsithu202/use-query-state
Description: react router query state custom hook
Author: Kaung Si Thu
Latest version: 1.0.1

# use-query-state

## A simple React hook for managing and updating URL query parameters with React Router!

### Features

#### Set, update, delete, and read query parameters easily

#### Designed for use with React Router(useSearchParams)

#### Written in modern JavaScript,TS Supports

#### Installation

#### First, make sure you have react-router-dom v6+ installed in your project:

`npm install react-router-dom`

#### Then install this package:

` npm install use-query-state`

#### Usage

`import React from "react";`

`import useQueryState from "use-query-state";`

```js const MyComponent = () => {
const {
searchParams,
urlSearchParams,
setQuery,
updateQuery,
deleteQuery,
deleteQueries,
getQuery,
hasQuery,
getAllQueries,
} = useQueryState();

// Example: Set query param foo=bar
const handleSetQuery = () => {
setQuery({ foo: "bar" });
};

// Example: Update/add param baz=qux
const handleUpdateQuery = () => {
updateQuery({ baz: "qux" });
};

// Example: Get value of param foo
const fooValue = getQuery({ key: "foo", defaultValue: "not set" });

// Example: Check if param baz exists
const hasBaz = hasQuery("baz");

// Example: Remove param foo
const handleRemoveFoo = () => {
deleteQuery("foo");
};

// Example: Clear all query params
const handleClearAll = () => {
deleteQueries();
};

return (
<div>
<button onClick={handleSetQuery}>Set foo=bar</button>
<button onClick={handleUpdateQuery}>Update baz=qux</button>
<button onClick={handleRemoveFoo}>Remove foo</button>
<button onClick={handleClearAll}>Clear All</button>
<div>foo: {fooValue}</div>
<div>baz exists? {hasBaz ? "Yes" : "No"}</div>
<div>
All query params: <pre>{JSON.stringify(getAllQueries(), null, 2)}</pre>
</div>
</div>
);
};

export default MyComponent;
```

#### API

#### useQueryState() returns the following:

#### Function Description

- setQuery(params, options) Replace all query params with params (object).
- updateQuery(newParams, options) Merge new params into existing ones.
- deleteQuery(paramKey, options) Remove a specific query parameter.
- deleteQueries(paramKeys, options) Remove multiple query parameters; if paramKeys empty, remove all.
- getQuery({ key, defaultValue }) Retrieve a query param value with optional default.
- hasQuery(key) Returns true if the given parameter exists.
- getAllQueries() Returns all query params as an object.
- searchParams & urlSearchParams The raw URLSearchParams instance(s) for advanced use-cases.

##### All functions accept an optional options object with { replace: boolean }

##### Use replace: true to replace instead of push in browser history.

##### Requirements

##### React Router v6+ (uses useSearchParams hook)

##### React 17 or 18

License
MIT

#### Enjoy easy query parameter management in your React projects!

#### Let me know if you need adjustments or additional info!
npm package: @kaunio/react-scripts-lfapp
Description: Learnifier Configuration and scripts for Create React App.
Latest version: 1.0.1

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.