open-index/open-npm huggingface dataset:
npm package: @itzsaga/use-lazy-pagination
Description: Apollo useLazyQuery bi-directional pagination hook.
Author: Seth Alexander
Latest version: 0.1.1

# @itzsaga/use-lazy-pagination

[![Greenkeeper badge][greenkeeper-image]][greenkeeper-link] [![npm version][npm-version-image]][npm-version-link]

Bi-directional pagination hook for use in React using GraphQL & the Relay cursor-based pagination. Expectin an Apollo `useLazyQuery` function. Thank to a [blog post][inspiration] by Tim Specht for the inspiration.

## Installation

```bash
$ npm i @itzsaga/use-lazy-pagination
```

or

```bash
$ yarn add @itzsaga/use-lazy-pagination
```

## Usage

The hook expects a single argument, the query function returned from the `@apollo/react-hooks` `useLazyQuery` hook.

```javascript
const { goBack, goForward } = useLazyPagination(queryPosts);
```

### Return

The hook returns an object with 4 things on it.

| Return Value    | Description                                             |
| :-------------- | :------------------------------------------------------ |
| currentPage     | The current page you are on in the stack, defaults to 1 |
| goBack          | A function that moves you back a page                   |
| goForward       | A function that move you forward a page                 |
| resetPagination | A function that resets the pagination state             |

Note: `goForward` expects a single argument of the `endCursor` provided in the `pageInfo` from the query. This is how the stack is built.

## Example

```javascript
import React from "react";
import { useLazyQuery } from "@apollo/react-hooks";
import useLazyPagination from "@itzsaga/use-lazy-pagination";

function App() {
  const [ queryPosts, { data, error, loading } ] = useLazyQuery(QUERY_POSTS);
  const { currentPage, goBack, goForward, resetPagination } = useLazyPagination(
    queryPosts
  );

  if (error) return <div>Error.</div>;

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      <button disabled={currentPage === 1} onClick={() => goBack()}>
        Back
      </button>
      <div>You are on page {currentPage}.</div>
      <button onClick={() => goForward(data.Posts.pageInfo.endCursor)}>
        Forward
      </button>
    </div>
  );
}
```

## Contributing

Bug reports and pull requests are welcome on GitHub at [https://github.com/itzsaga/use-lazy-pagination][repo-url]. If you would like to help with this project see our [Contributing][contributing] doc for more info.

## License

The app is available as open source under the terms of the [MIT License][license].

[greenkeeper-image]: https://badges.greenkeeper.io/itzsaga/use-lazy-pagination.svg
[greenkeeper-link]: https://greenkeeper.io/
[npm-version-image]: https://badge.fury.io/js/%40itzsaga%2Fuse-lazy-pagination.svg
[npm-version-link]: https://badge.fury.io/js/%40itzsaga%2Fuse-lazy-pagination
[inspiration]: https://engineering.dubsmash.com/bi-directional-pagination-using-graphql-relay-b523c919c96
[repo-url]: https://github.com/itzsaga/use-lazy-pagination
[contributing]: ./CONTRIBUTING.md
[license]: ./LICENSE
npm package: @itzsudhan/creem-expo
Description: Expo-first Creem payments SDK for Expo-managed apps, React Native, and Expo Router projects.
Author: Sudhan
Latest version: 1.0.0

# @itzsudhan/creem-expo

Expo-first Creem payments for Expo-managed apps, React Native, and Expo Router projects.

Install:

```bash
npm install @itzsudhan/creem-expo
```

What you get:

- Expo config plugin for `expo prebuild`
- `useCreemCheckout()`
- `useCreemSubscription()`
- browser checkout via `expo-web-browser`
- modal checkout via `react-native-webview`
- deep-link handling with `expo-linking`
- server helpers for checkout creation, verification, webhooks, and subscriptions

Quick example:

```tsx
import {
  CreemProvider,
  createCreemApiClient,
  useCreemCheckout,
} from "@itzsudhan/creem-expo";
```

Use the config plugin:

```js
export default {
  expo: {
    plugins: [["@itzsudhan/creem-expo", { scheme: "myapp" }]],
  },
};
```

Full repo, examples, and guides:

- GitHub: https://github.com/SudhanPlayz/creem-expo
- Guide: https://github.com/SudhanPlayz/creem-expo/blob/master/GUIDE.md
- Docs index: https://github.com/SudhanPlayz/creem-expo/blob/master/docs/README.md
npm package: @itzsunny/firebase-login
Description: Run command for install `npm i -D @itzsunny/firebase-login`
Author: Muhammad Sarwar
Latest version: 0.0.8

## firebase phone number authentication react native expo hook

Run command for install `npm i -D @itzsunny/firebase-login`

#### Example 
``` 
const {recaptcha,recaptchaBanner,sendOtp,verifyOtp} = useFirebaseLogin({auth: /** auth instance from firebase */,firebaseConfig:/** firebase config */});

// for sending otp to phone number 
sendOtp('+92XXXXXXXX')
// verify otp
verifyOtp('verification Id','XXXXX')


recaptcha // firebase recpatch element

```
npm package: @itzsunny/password
Description: Run command for install `npm i -D @itzsunny/password`
Latest version: 0.0.1

## Basic Password Api

Run command for install `npm i -D @itzsunny/password`

#### Example 
``` 
import {PasswordModule} from '@itzsunny/password';
PasswordModule.encrypt('text');
PasswordModule.compare('text','/././.);

```
npm package: @itzsunny/storageapi
Description: Run command for install `npm i -D @itzsunny/storageapi`
Latest version: 0.0.10

## Basic Storage Api

Run command for install `npm i -D @itzsunny/storageapi`

#### Example 
``` 
import Storage from '@itzsunny/storageapi';
const storage = new Storage("LOCAL");  // "LOCAL" | "SESSION"

storage.set(key, value); // Set value in localstorage
storage.get(key); // Get value in localstorage
storage.clear(key)// Clear value in localstorage
storage.cleanAll(); // Clear All value in localstorage
```