open-index/open-npm huggingface dataset:
npm package: @harshchauhan2410/react-card-icons
Description: A simple React component to display credit card icons based on **card type**.
Latest version: 0.1.10

# react-card-icons

A simple React component to display credit card icons based on **card type**.

## Installation

```bash
npm i @harshchauhan2410/react-card-icons
```
## Usage

```tsx
import React from "react";
import CardIcon from "react-card-icons";

export default function App() {
  return (
    <div style={{ display: "flex", gap: "12px", alignItems: "center" }}>
      <CardIcon type="visa" size={48} />
      <CardIcon type="mastercard" size={48} />
      <CardIcon type="amex" size={48} />
      <CardIcon type="discover" size={48} />
      <CardIcon type="unknown" size={48} />
    </div>
  );
}
```
## Props

| **Prop** | **Type**  | **Default** | **Description** |
|---------------|----------------|--------------|--------------|
| `type`     | `CardType` | —       | Card type to display (`visa`, `mastercard`, `amex`, `discover`, `jcb`, `dinersclub`, `unionpay`, `maestro`, `cirrus`, `stripe`, `googlepay`, `applepay`, `amazonpay`, `unknown`) |
| `size`     | `number`   | `32`    | Width & height of the icon in pixels |
| `className`| `string`   | —       | CSS class for the wrapper `<span>` |
| `alt`      | `string`   | —       | ARIA label for accessibility |
npm package: @harshcode/devsnap
Description: Capture and diff your dev environment
Author: Harsh Kumar
Latest version: 1.0.6

# @harshcode/devsnap

Capture and diff your dev environment from the terminal.

---

## Install

```bash
npm install -g @harshcode/devsnap
```

Requires Node 18+. Works on macOS, Linux, and Windows.

---

## Quickstart

```bash
# 1. Register and get an API key
curl -X POST https://devsnap-production.up.railway.app/api/auth/register \
  -H "Content-Type: application/json" \
  -d '{"email": "you@example.com"}'

# 2. Save your API key
devsnap auth --key YOUR_API_KEY

# 3. Capture before a change
devsnap capture --tag "before"

# 4. Make your change, then capture again
devsnap capture --tag "after"

# 5. Diff them
devsnap diff <id1> <id2>
```

---

## Commands

| Command | Description |
|---------|-------------|
| `devsnap capture` | Snapshot current environment |
| `devsnap capture --tag <tag>` | Snapshot with a label |
| `devsnap capture --note <note>` | Snapshot with a note |
| `devsnap list` | List recent snapshots |
| `devsnap list --limit <n>` | List up to n snapshots |
| `devsnap diff <id1> <id2>` | Diff two snapshots |
| `devsnap auth --key <key>` | Save your API key |

---

## What gets captured

| | |
|-|-|
| Runtimes | Node, npm, Python, pip, Go, Rust, Java, Ruby |
| Packages | npm global + pip global |
| Env keys | Key names only — values never stored |
| Git | Branch, dirty flag, last 5 commits |
| Ports | All TCP LISTEN ports |
| System | OS, arch, CPU, memory, shell |

---

## Links

- 🌐 **Dashboard:** [devsnap-frontend.vercel.app](https://devsnap-frontend.vercel.app)
- 📦 **npm:** [npmjs.com/package/@harshcode/devsnap](https://www.npmjs.com/package/@harshcode/devsnap)
- 💻 **GitHub:** [github.com/hars310/devsnap](https://github.com/hars310/devsnap)

---

MIT © [Harsh Kumar](https://github.com/hars310)
npm package: @harshendra_prajapati/floating-video-player
Description: A draggable and resizable floating video player component for React
Author: Your Name
Latest version: 1.0.0

# Floating Video Player

A draggable and resizable floating video player (Picture-in-Picture) component for React.

## Installation

```bash
npm install floating-video-player
```

## Peer Dependencies

```bash
npm install react react-dom
```

## Usage

```tsx
import React, { useState } from 'react';
import { FloatingVideoPlayer } from 'floating-video-player';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Video</button>
      
      <FloatingVideoPlayer
        open={isOpen}
        onClose={() => setIsOpen(false)}
        content="https://example.com/video.mp4"
        initialWidth={400}
        aspectRatio={16 / 9}
        showControls={true}
        handleColor="#212121"
        backgroundColor="#ffffff"
      />
    </div>
  );
}

export default App;
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `open` | `boolean` | - | Controls whether the player is visible |
| `onClose` | `() => void` | - | Callback when close button is clicked |
| `content` | `string \| null \| undefined` | - | Video URL source |
| `initialWidth` | `number` | `window.innerWidth / 3` | Initial width in pixels |
| `initialHeight` | `number` | Calculated from aspect ratio | Initial height in pixels |
| `initialPosition` | `{ x: number, y: number }` | Bottom-right | Initial position |
| `aspectRatio` | `number` | `16/9` | Video aspect ratio |
| `showControls` | `boolean` | `true` | Show drag handle and close button |
| `className` | `string` | `''` | Additional CSS class |
| `style` | `React.CSSProperties` | - | Additional inline styles |
| `handleColor` | `string` | `'#212121'` | Background color of drag handle |
| `backgroundColor` | `string` | `'#ffffff'` | Background color of container |

## Features

- Draggable via mouse and touch
- Resizable from bottom-right corner
- Maintains aspect ratio while resizing
- Mobile responsive
- Automatic boundary constraints
- Autoplay on open
- No external UI library dependencies

## License

MIT
npm package: @harshil1712/slidev-addon-live-reactions
Description: Get live reactions in your Slidev presentation
Author: Harshil Agrawal
Latest version: 0.1.3


# Slidev Addon: Live Reactions

Enhance your Slidev presentations with real-time audience reactions!

## Features

- Add live reaction emojis to your Slidev presentations
- Real-time updates visible to all connected viewers
- Customizable emoji set
- Easy integration with existing Slidev projects

## Installation

```bash
npm install slidev-addon-live-reactions
```

## Usage

1. Add the following to your slides.md frontmatter:

```md
---
addons:
  - slidev-addon-live-reactions

liveReactions:
  server: ws://localhost:8787/ws
---
```

> [!NOTE]
> Make sure to replace `ws://localhost:8787/ws` with the actual WebSocket server URL. You can find the Server code in this [GitHub repository](https://github.com/harshil1712/slidev-realtime-feedback-do).


2. Add the component to `global.vue`
```vue
<template>
  <LiveReactions />
</template>
```

## Configuration

You can customize the available reactions by modifying your slides.md frontmatter:

```md
---
liveReactions:
  okay: 👀
  good: 👍
  great: ❤️
  mindBlown: 🤯
---
```

## Contributing

Contributions are welcome! Please feel free to open issues or submit pull requests.
npm package: @harshil1712/slidev-addon-protected-presenter
Description: A simple Slidev addon to protect your slides from being advanced by the audience
Author: Harshil Agrawal
Latest version: 1.0.2

# Welcome to [Slidev](https://github.com/slidevjs/slidev)!

To start the slide show:

- `pnpm install`
- `pnpm dev`
- visit <http://localhost:3030>

Edit the [slides.md](./slides.md) to see the changes.

Learn more about Slidev at the [documentation](https://sli.dev/).
npm package: @harshit-singh/local-storage-helper
Description: A simple utility to safely work with localStorage
Author: Harshit Singh
Latest version: 1.0.2

# local-storage-helper

A simple, safe utility library to make working with `localStorage` easier and more predictable.

## Features

- Automatically handles JSON parsing/stringifying
- Safe defaults (no crashes on missing keys)
- Clean, predictable API
- Works with arrays, objects, and primitives
- No dependencies

---

## Installation 

```bash
npm install @harshit-singh/local-storage-helper
```

## Usage
```js
import {
  set,
  get,
  exists,
  remove,
  clear,
  append
} from "@harshit-singh/local-storage-helper";

// Store data
set("user", { name: "Harshit", age: 20 });

// Get data
get("user");
// → { name: "Harshit", age: 20 }

// Check if a key exists
exists("user");
// → true

// Append values
append("numbers", 1);
append("numbers", 2);
// → [1, 2]

// Remove a key
remove("user");

// Clear all localStorage
clear();
```
npm package: @harshit_badaya/ngx-toast
Description: Lightweight Angular Toast Notification Library
Latest version: 0.0.2

# NgxToast

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.0.

## Code scaffolding

Run `ng generate component component-name --project ngx-toast` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-toast`.
> Note: Don't forget to add `--project ngx-toast` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build ngx-toast` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build ngx-toast`, go to the dist folder `cd dist/ngx-toast` and run `npm publish`.

## Running unit tests

Run `ng test ngx-toast` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
npm package: @harshita_joshi/canvas-editor
Description: rich text editor by canvas/svg. This is a fork of https://github.com/Hufe921/canvas-editor
Latest version: 1.0.9

<h1 align="center">canvas-editor</h1>

<p align="center"> a rich text editor by canvas/svg</p>

This is a Fork of [canvas-editor-plugin](https://github.com/Hufe921/canvas-editor-plugin) to support some custom features specific to my need(tbd).

## install

`yarn`

## dev

`npm run dev`

## build

#### app
`npm run build`

#### lib
`npm run lib`
npm package: @harshitpant/auto
Description: Helps you automate setting up projects.
Latest version: 0.0.9

# `@timsuchanek/auto`

Helps you automate setting up projects.

## Projects

### Prisma

Includes the latest Prisma Client alpha with a running SQLite example.
I'm using this myself a lot, to quickly get reproductions running.

This is not an official Prisma tool!

## Usage

### Default usage (SQLite)

```bash
mkdir test
cd test
npx @timsuchanek/auto prisma
ts-node main.ts
```

### Postgres

```bash
mkdir test
cd test
npx @timsuchanek/auto prisma --pg DATABASE_NAME
ts-node main.ts
```

### MySQL

```bash
mkdir test
cd test
npx @timsuchanek/auto prisma --mysql DATABASE_NAME
ts-node main.ts
```

### Default url
If you want to set the default url use, add the following config file to `~/.autorc.json`

```json
{
  "prisma": {
    "postgres": "postgresql://postgres:postgres@localhost:5432/",
    "mysql": "mysql://root:root@localhost:3306/"
  }
}
```
npm package: @harshitpant/ga-4-react
Description: Simple wrapper of ga4 scripts for React: https://developers.google.com/analytics/devguides/collection/ga4
Author: manueltrebbi
Latest version: 0.1.281

# GA4React - Google Analytics 4 React

Simple wrapper of ga4 scripts for React:
https://developers.google.com/analytics/devguides/collection/ga4

## Google Analytics 4 React

Example without components

```javascript

const ga4react = new GA4React(
'YOUR GA CODE',
{ /* ga custom config, optional */ },
[ /* additional code, optional */ ],
5000 /* timeout, optional, defaults is 5000 */,
options /* { nonce: ['first-script-is-async','second-script'] } */

});
ga4react.initialize().then((ga4) => {
  ga4.pageview('path')
  ga4.gtag('event','pageview','path') // or your custom gtag event
},(err) => {
  console.error(err)
})

```

---

## Inject GA4React function in props of childrens

Example with custom components 'GA4R'

```typescript
const Test: React.FC<any> = ({ ga4 }) => {
  return <>{ga4 && console.log(ga4)}</>;
};


<GA4R code="YOUR GA CODE">
    <Test></Test>
</GA4R>
```

## RENDER:

console.log results:

`{pageview: ƒ, gtag: ƒ, event: ƒ}`

---

## Components withTracker

Pass pageview data to the `path` prop:

```javascript
const Tracker = withTracker(props => <>{JSON.stringify(props)}</>);
...
 <Tracker path="myCustomPath" gaCode="GA-CODE"></Tracker>

```

---

## useGA4React Hook

```javascript
const Example = () => {
  const ga4React = useGA4React(); // GA CODE, optional, if empty try to get from globals
  return <>{JSON.stringify(ga4React)}</>;
};

```

___
## "Manual start"

```javascript
import React from "react";
import ReactDOM from "react-dom";
import GA4React, { useGA4React } from "ga-4-react";

const ga4react = new GA4React("G-1JXXXXX");

function MyApp() {
  const ga = useGA4React();
  console.log(ga);

  return <div className="App">hi!</div>;
}

(async () => {
  await ga4react.initialize();

  ReactDOM.render(
    <React.StrictMode>
      <MyApp />
    </React.StrictMode>,
    document.getElementById("root")
  );
})();
```

---

<a href="https://www.buymeacoffee.com/unrealmanu" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
npm package: @harshitpant/next-fonts
Description: Import fonts in [Next.js](https://github.com/zeit/next.js) (woff, woff2, eot, ttf & otf)
Latest version: 1.1.0

# Next.js + Fonts

Import fonts in [Next.js](https://github.com/zeit/next.js)
(woff, woff2, eot, ttf & otf)

## Installation

```
npm install --save next-fonts
```

or

```
yarn add next-fonts
```

## Usage

Create a `next.config.js` in your project

```js
// next.config.js
const withFonts = require('next-fonts')
module.exports = withFonts()
```

Optionally you can add your custom Next.js configuration as parameter

```js
// next.config.js
const withFonts = require('next-fonts')
module.exports = withFonts({
  webpack(config, options) {
    return config
  }
})
```