open-index/open-npm huggingface dataset:
npm package: @girders-elements/components
Description: Girders Elements custom components for React and React Native.
Author: netcetera
Latest version: 1.0.0-alpha.26

# Components

Girders Element's `components` package is a library of custom components that aid in building React and React Native apps.

## Available Components

### Viewport Tracker

Tracks the position and size of a `ScrollView` or `ListView` viewport. Communicates it to all viewport aware child components.

#### Usage

```javascript
import { Viewport } from '@girders-elements/components';

render() {
  return (
    <Viewport.Tracker>
      <ScrollView>
        { this.props.children }
      </ScrollView>
    </Viewport.Tracker>
  );
}
```

### Viewport Aware

A higher-order component that processes the information communicated by the viewport tracker. Determines whether the wrapped component is in or outside the viewport. Updates the `inViewport` parameter of the wrapped component accordingly.

#### Usage

```javascript
import { Image } from 'react-native';
import { Viewport } from '@girders-elements/components';
const ViewportAwareImage = Viewport.Aware(Image);

render() {
  return (
    <ViewportAwareImage
      source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
      preTriggerRatio={0.5} />
  );
}
```

#### Properties

| Prop | Description | Default |
|---|---|---|
|**`preTriggerRatio`**| Determines pre-triggering of `inViewport`. Useful for rendering components beforehand to improve user experience. A ratio of `0.5` means that the effective viewport will be twice the size of the real viewport. | `0` |

### With Place Holder

A higher-order component that can be used to display a place holder while the component is not in the viewport. This can improve user experience.

#### Usage

```javascript
import { Image, View } from 'react-native';
import { Viewport } from '@girders-elements/components';

const PlaceHolder = () => <View style={{ width: 50, height: 50, backgroundColor: 'darkgrey' }} />

const ViewportAwareImageWithPlaceholder = Viewport.Aware(Viewport.WithPlaceHolder(Image, PlaceHolder));

render() {
  return (
    <ViewportAwareImageWithPlaceholder
      source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
      preTriggerRatio={0.5}
      style={{ width: 50, height: 50 }} />
  );
}
```

#### Properties

| Prop | Description | Default |
|---|---|---|
|**`placeHolder`**| Useful for passing down a place holder at render time. | `null` |
npm package: @giridharans/qr-code
Description: Simple UPI QR generator for GPay, PhonePe, Paytm and more
Author: Giridharan S
Latest version: 1.0.0


# qr-code

Simple UPI QR generator for GPay, PhonePe, Paytm and all UPI apps in India.

Created by **Giridharan S** (Developer).

---

## 📦 Installation

```bash
npm install qr-code
````

---

## 🚀 Usage

### Generate UPI QR as Data URL (PNG)

```js
const { generateUPIQR } = require("qr-code")

async function main() {
  const image = await generateUPIQR({
    upiId: "giri@upi",
    name: "Giridharan S",
    amount: 99,
    note: "Payment from Giridharan",
    format: "data-url"
  })

  console.log(image)
}

main()
```

---

## 🎨 Output Formats

| Format       | Description       |
| ------------ | ----------------- |
| `data-url`   | Base64 PNG string |
| `svg`        | SVG XML string    |
| `png-buffer` | PNG file buffer   |

---

## ⚙️ Options

| Field    | Type          | Required | Description                 |
| -------- | ------------- | -------- | --------------------------- |
| upiId    | string        | yes      | UPI VPA                     |
| name     | string        | no       | Payee name                  |
| amount   | number/string | no       | Transaction amount          |
| note     | string        | no       | UPI note                    |
| currency | string        | no       | Default: INR                |
| format   | string        | no       | data-url / svg / png-buffer |

---

## 📝 Example Saving as PNG

```js
const fs = require("fs")
const { generateUPIQR } = require("qr-code")

async function save() {
  const buf = await generateUPIQR({
    upiId:"giri@upi",
    name:"Giri",
    format:"png-buffer"
  })

  fs.writeFileSync("upi-qr.png", buf)
}

save()
```

---

## 📄 License

MIT
npm package: @girin/typelink
Description: Define GraphQL types linked to classes
Author: Max Choi
Latest version: 0.5.2

# Typelink 🦒

[![npm version](https://badge.fury.io/js/%40girin%2Ftypelink.svg)](https://www.npmjs.com/package/@girin/typelink)
[![Build Status](https://travis-ci.org/giringraphql/typelink.svg?branch=master)](https://travis-ci.org/giringraphql/typelink)
[![codecov](https://codecov.io/gh/giringraphql/typelink/branch/master/graph/badge.svg)](https://codecov.io/gh/giringraphql/typelink)

## Installation

```
npm install @girin/typelink
```

## Development

### Initialization

```sh
git clone https://github.com/giringraphql/typelink
cd girin
npm install
```

### Testing and Debugging

```
npm test
```