open-index/open-npm huggingface dataset:
npm package: @ojdom/next-page-transition
Description: ```     npm i @ojdom/next-page-transition ```
Latest version: 0.3.4

# next-page-transition

```
    npm i @ojdom/next-page-transition
```

This package is meant to smooth over difficulty with Page Transitions with the NextJS App Router. You can find a detailed discussion for the issue [here](https://github.com/vercel/next.js/issues/49279).

This library exposes a `<PageTransition>` component which extends Framer-motion's `motion` component, wrapped with its' own `AnimatePresence`. It also exposes a `usePageTransition` hook.

## PageTransition component

`<PageTransition>` accepts all `motion` props as well as extra props `element`, `pageExitDuration` and `animatePresenceProps`.

```
'use client'

import { PageTransition } from '@ojdom/next-page-transition'

export default function Home() {
  return (
    <main>
      <PageTransition
        element="aside"
        pageExitDuration={2}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        transition={{ ease: 'easeInOut', delay: 1.5, duration: 0.5 }}
      >
        <Sidebar />
      </PageTransition>
    </main>
  )
}

```

You can also use multiple components if required. If passed different `pageExitDuration` values, it will use the highest value for all.

```
'use client'

import { PageTransition } from '@ojdom/next-page-transition'

export default function Home() {
  return (
    <>
      <PageTransition
        element="header"
        pageExitDuration={1}
        animatePresenceProps={{ initial: false, onExitComplete: () => {} }}
        animate={{ height: '10vh' }}
        exit={{ height: 0 }}
        transition={{ ease: 'easeInOut', duration: 0.5 }}
      >
        <Header />
      </PageTransition>
      <main>
        <PageTransition
          element="aside"
          pageExitDuration={2}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ ease: 'easeInOut', delay: 1.5, duration: 0.5 }}
        >
          <Sidebar />
        </PageTransition>
      </main>
    </>
  )
}

```

## usePageTransition

The `usePageTransition` hook contains `isTransitioning` and `startTransition`:

```
'use client'

import { usePageTransition } from @ojdom/next-page-transition

export default function Header() {
    const { isTransitioning, startTransition } = usePageTransition()

    return (
        <>
            <div>
                {isTransitioning ? <Spinner /> : <Logo />}
            </div>
            <div>
                <a onClick={() => startTransition('/home')}>Home</a>
                <a onClick={() => startTransition('/about')}>About</a>
                <a onClick={() => startTransition('/contact')}>Contact</a>
            </div>
        </>
    )
}
```
npm package: @ojire/pg-react-native-sdk
Description: SDK for Ojire Payment Gateway
Author: Ferly Herlambang
Latest version: 0.1.1

How to install SDK

## React Native

> ⚠️ **Caution**
>
> You must get `customer_token`, `payment_secret` and `payment_id` first at your backend to OJIRE API via request to `/v1/payment-intents` endpoint

---

## Installation

Pastikan dependency WebView sudah terpasang:

```bash
npm install @ojire/pg-react-native-sdk
# atau
yarn add @ojire/pg-react-native-sdk
```

---

## Basic Usage

```tsx
import { OPGSnap } from '@ojire/pg-react-native-sdk';

<OPGSnap
  paymentId={intent.id}
  clientSecret={intent.clientSecret}
  publicKey="pk_xxxxxxxxxxxxxxxxx"
  token={intent.customerToken}
  envType="sandbox"
  onSuccess={(data) => {
    console.log('✅ SUCCESS:', data);
  }}
  onPending={(data) => {
    console.log('⏳ PENDING:', data);
  }}
  onError={(error) => {
    console.log('❌ FAILED:', error);
  }}
  onClose={() => {
    console.log('❎ CLOSED BY USER');
  }}
/>
```

---

## Props

| Prop | Type | Required | Description |
|-----|------|----------|-------------|
| `paymentId` | `string` | ✅ | Payment Intent ID |
| `clientSecret` | `string` | ✅ | Client secret dari API Ojire |
| `publicKey` | `string` | ✅ | Public key Ojire |
| `token` | `string` | ✅ | Customer token |
| `envType` | `'dev' \| 'sandbox' \| 'prod'` | ❌ | Environment (default: sandbox) |
| `onSuccess` | `(data: any) => void` | ❌ | Dipanggil saat pembayaran berhasil |
| `onPending` | `(data: any) => void` | ❌ | Dipanggil saat pembayaran pending |
| `onError` | `(error: any) => void` | ❌ | Dipanggil saat pembayaran gagal |
| `onClose` | `() => void` | ❌ | Dipanggil saat user menutup halaman |

---
npm package: @ojoachim/randomid-generator
Description: @ojoachim/randomid-generator
Latest version: 1.0.1

@ojoachim/randomid-generator

1. install:
yarn add @ojoachim/randomid-generator 
or 
npm install @ojoachim/randomid-generator

2. use:
const randomID = require('@ojoachim/randomid-generator');
console.log(randomID(10));