open-index/open-npm huggingface dataset:
npm package: @reactslides/shared-ui
Description: Pre-built, customizable components for creating beautiful presentations
Latest version: 0.0.11

# @reactslides/shared-ui

Shared UI components library for ReactSlides presentations.

## Features

### Layout Components
- `TitleSlide` - Opening slide with title and subtitle
- `ContentSlide` - Standard content layout with header
- `TwoColumn` - Two-column layout with flexible ratios
- `ThreeColumn` - Three-column layout
- `FourColumn` - Four-column layout
- `Grid` - Flexible grid layout

### Content Components
- `Heading` - Semantic headings (h1-h6)
- `Text` - Styled text with size and weight variants
- `List` - Ordered and unordered lists with animations
- `Quote` - Stylized quote blocks
- `Code` - Syntax-highlighted code blocks

### Media Components
- `Image` - Responsive images with fit options
- `Video` - Video player with controls
- `Embed` - **Embed websites, web apps, and videos**

### Interactive Components
- `Fragment` - Step-by-step reveals
- `Animation` - Animation effects
- `Chart` - Data visualization
- `Diagram` - Mermaid diagrams

## Embedding Content with `Embed`

The `Embed` component makes it easy to embed websites, web applications, and videos directly into your slides.

### Basic Usage

```tsx
import { Embed } from '@reactslides/shared-ui';

// Embed a website
<Embed
  url="https://example.com"
  title="Example Website"
  aspectRatio="16:9"
/>

// Embed a YouTube video (auto-converts URL)
<Embed
  url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  title="Video Demo"
/>

// Embed a web application with sandbox restrictions
<Embed
  url="https://codesandbox.io/embed/..."
  title="Live Code Demo"
  sandbox="allow-scripts allow-same-origin"
  loading="lazy"
/>
```

### Props

- `url` (required) - URL to embed (supports YouTube, Vimeo, Google Slides, and generic URLs)
- `title` - Accessibility title for the iframe
- `aspectRatio` - `"16:9"` (default), `"4:3"`, or `"1:1"`
- `allowFullscreen` - Allow fullscreen mode (default: `true`)
- `allow` - Custom iframe permissions (default: common permissions)
- `sandbox` - Sandbox restrictions for security
- `loading` - `"eager"` (default) or `"lazy"` for lazy loading
- `referrerPolicy` - Referrer policy for the iframe

### URL Auto-Conversion

The Embed component automatically converts URLs to their embeddable format:

- **YouTube**: `youtube.com/watch?v=...` → `youtube.com/embed/...`
- **Vimeo**: `vimeo.com/123456` → `player.vimeo.com/video/123456`
- **Google Slides**: Converts edit URLs to embed URLs

### Security

Use the `sandbox` attribute to restrict iframe capabilities:

```tsx
<Embed
  url="https://untrusted-site.com"
  sandbox="allow-scripts allow-same-origin"
/>
```

Common sandbox values:
- `allow-scripts` - Allow JavaScript
- `allow-same-origin` - Allow same-origin access
- `allow-forms` - Allow form submission
- `allow-popups` - Allow popups

### Performance

Use lazy loading for better performance:

```tsx
<Embed
  url="https://heavy-site.com"
  loading="lazy"
/>
```

## Examples

See the example app (`apps/example`) for live demonstrations of all components, including multiple iframe embedding scenarios.
npm package: @reactstack/svelte-query
Description: Hooks for managing, caching and syncing asynchronous and remote data in Svelte
Latest version: 1.0.0
Deprecated: Package no longer supported. Please use @sveltestack/svelte-query instead.

<img src="./docs/src/images/svelte-query-og.png" />

Hooks for managing, caching and syncing asynchronous and remote data in Svelte

## Quick Features

- Transport/protocol/backend agnostic data fetching (REST, GraphQL, promises, whatever!)
- Auto Caching + Refetching (stale-while-revalidate, Window Refocus, Polling/Realtime)
- Parallel + Dependent Queries
- Mutations + Reactive Query Refetching
- Multi-layer Cache + Automatic Garbage Collection
- Paginated + Cursor-based Queries
- Load-More + Infinite Scroll Queries w/ Scroll Recovery
- Request Cancellation


## Contributing

**PRs are welcome!**
You noticed a bug, a possible improvement or whatever?
Any help is always appreciated, so don't hesitate opening one!

Be sure to check out the [contributing guidelines](CONTRIBUTING.md) to fasten
up the merging process.

**Get started (Devs)**

```bash
git clone git@github.com:TanStack/svelte-query.git
cd svelte-query
yarn
yarn storybook
```

**Running the tests**

```bash
yarn test
```

**Running the Docs**

```bash
cd docs
yarn
yarn build
yarn start
```
http://localhost:3000

**Build**

```bash
yarn build
```
npm package: @reactster/react-native-baidu-geolocation
Description: RN Baidu Geolocation Plugin with Turbo Modules
Author: Dhika P Ardana
Latest version: 0.6.0

# react-native-baidu-geolocation

RN Baidu Geolocation Plugin with Turbo Modules

## Installation

```sh
npm install react-native-baidu-geolocation
```

## Usage


```js
import { multiply } from 'react-native-baidu-geolocation';

// ...

const result = multiply(3, 7);
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
npm package: @reactster/react-native-imei
Description: RN IMEI Module
Author: Dhika P Ardana
Latest version: 0.2.0

# @reactster/react-native-imei

RN IMEI Module

## Installation

```sh
npm install @reactster/react-native-imei
```

## Usage


```js
import { multiply } from '@reactster/react-native-imei';

// ...

const result = multiply(3, 7);
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
npm package: @reactswap/sdk
Description: 🛠 An SDK for building applications on top of ReactSwap.
Latest version: 2.0.1

# ReactSwap SDK

Forked from the [Uniswap SDK](https://github.com/Uniswap/uniswap-v2-sdk/commit/a88048e9c4198a5bdaea00883ca00c8c8e582605).
                                                                                                                                                                                                                                                                                                                            
You can refer to the Uniswap SDK documentation [uniswap.org](https://uniswap.org/docs/v2/SDK/getting-started/).

## Running tests
                                                                                                                                                                           
To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/stabilitydao/react-swap-sdk.git
```

Move into the reactswap-sdk working directory

```sh
cd reactswap-sdk/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```

You should see output like the following:

```sh
yarn run v1.22.4
$ tsdx test
 PASS  test/constants.test.ts
 PASS  test/pair.test.ts
 PASS  test/fraction.test.ts
 PASS  test/miscellaneous.test.ts
 PASS  test/entities.test.ts
 PASS  test/trade.test.ts

Test Suites: 1 skipped, 6 passed, 6 of 7 total
Tests:       3 skipped, 82 passed, 85 total
Snapshots:   0 total
Time:        5.091s
Ran all test suites.
✨  Done in 6.61s.
```
npm package: @reactswap/uikit
Description: Set of UI components for ReactSwap projects
Latest version: 1.0.11

# 🥞 Pancake UIkit

[![Version](https://img.shields.io/npm/v/@pancakeswap/uikit)](https://www.npmjs.com/package/@pancakeswap/uikit) [![Size](https://img.shields.io/bundlephobia/min/@pancakeswap/uikit)](https://www.npmjs.com/package/@pancakeswap/uikit)

Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @pancakeswap/uikit`

***Note**: In case you want to use the older version of the Pancake UIkit, you should install @pancakeswap-libs/uikit, instead, but we recommend using the latest version of the UIkit.*


## Setup

### Theme

Before using Pancake UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@pancakeswap/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@pancakeswap/uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.

## How to use the UIkit

If you want to use components from the UIkit, check the [Storybook documentation](https://pancakeswap.github.io/pancake-uikit/)
npm package: @reacttv/embed-kit
Description: Normalized API across YouTube, Twitch, TikTok, and other embed sources
Latest version: 0.5.2

# embed-kit

Normalized API across different embed sources (YouTube, Twitch, TikTok, and others). Includes custom elements per provider and a React wrapper (`ReactEmbedKit`).

## Install (GitHub Packages)

The package is published to GitHub Package Registry. Use the scoped name `@reacttv/embed-kit`.

1. **Authenticate** with GitHub Packages (one-time). Create a [Personal Access Token](https://github.com/settings/tokens) with `read:packages` (and `write:packages` if you will publish). Then:

   ```bash
   npm login --scope=@reacttv --registry=https://npm.pkg.github.com
   # Username: your GitHub username
   # Password: your PAT (not your GitHub password)
   # Email: your email
   ```

   Or add to your project or home `~/.npmrc` (never commit a real token):

   ```
   @reacttv:registry=https://npm.pkg.github.com
   //npm.pkg.github.com/:_authToken=YOUR_GITHUB_PAT
   ```

2. **Install** the package:

   ```bash
   npm install @reacttv/embed-kit
   ```

## Setup (developing this package)

When **developing** this package locally:

```bash
npm install
npm run build
```

The `prepare` script runs on install and builds `dist/` so consumers get a working build.

## Publishing (GitHub Packages)

- **From CI**: Push a tag (e.g. `v0.1.0`) or create a GitHub Release; the workflow in `.github/workflows/publish.yml` builds and runs `npm publish` to GitHub Package Registry.
- **Manually**: Ensure you’re logged in to the registry (`npm login --scope=@reacttv --registry=https://npm.pkg.github.com`), then run `npm run build` and `npm publish`.

## Scripts

- **`npm run build`** — Compile TypeScript to `dist/`
- **`prepare`** — Runs on `npm install`; builds the package so consumers get a working `dist/`
- **`npm run clean`** — Remove `dist/`

## Development

Source lives in `src/`. The build outputs to `dist/` with the same structure.

## Test pages

Each provider has its own test page in its package: `src/youtube/test.html`, `src/twitch/test.html`, etc. To run the test server (builds then serves):

```bash
npm run test
```

Open the URL shown (e.g. `http://localhost:3000/test/` for the index, or `http://localhost:3000/src/youtube/test.html` for YouTube).
npm package: @reactual/c
Description: a node.js console.log prettifier :art:
Author: Reactual
Latest version: 0.1.3

<img src="docs/resources/logo_icon.png" alt="Logo" width="86">

### **c** (:art:)
_A console.log prettifier for node.js_


## Notice

Currently under development/unreleased, not for use in production.


## Installation

Published as an npm module under the `@reactual` organization.

```bash
yarn add @reactual/c

# or via npm

npm install --save @reactual/c
```

## Usage
There are a few possible ways to use _`c`_ within a project:

### Import Directly As Needed

Import or require from `@reactual/c` in each file as needed. Since _`c`_ is a default export, you can use any variable name you prefer.

```js
/** ES6 imports */
import c from '@reactual/c'

/** or any var preferred */
import log from '@reactual/c'


/** ES5 require */
const c = require('@reactual/c')

/** or any var preferred */
const log = require('@reactual/c')

```
### Logging messages
Replace normal `console.log` statements with examples below.


```js
const total = 2 + 2

// console.log('The total is:', total

c('The total is:', total)
```

### Specifying a log level
The most basic usage is to not specify a log level. _`c`_ defaults to `info`, or `error` if the value being logged is an instance of a node.js `Error`. You can also force a specific log level by passing a 3rd argument.


```js

const total = 2 + 2

/** level unspecified, defaults to "info" for values that aren't instances of Error */
c('info unspecified example, total:', total)

/** info, forced with abbreviation */
c('info example, total:', total, 'i')

/** info, forced with full word */
c('info, full word example, total:', total, 'info')

/** warn, forced with abbreviation */
c('warning example, total:', total, 'w')

/** error, forced with abbreviation */
c('error example, total:', total, 'e')

/** level unspecified, defaults to "error" for instances of Error */
c('error unspecified example, total:', new Error(total))

```

Valid values for log level, You can use the full name or abbreviation:

- `info` | `i`
- `warn` | `w`
- `error` | `e`

If you pass an invalid value for level, _`c`_ will ignore it and fallback to `info` or `error` depending on the value being logged.

In addition to instances of `Error`, the below error classes will default to the `error` level.

- `AssertionError`
- `RangeError`
- `ReferenceError`
- `SyntaxError`
- `TypeError`