open-index/open-npm huggingface dataset:
npm package: @muriukialex/react-infinite-scroll
Description: A package to add infinite scroll functionality to your react application
Author: muriukialex
Latest version: 1.2.0

# @muriukialex/react-infinite-scroll

A custom React hook for implementing infinite scroll functionality with ease. This hook simplifies the process of setting up an Intersection Observer for infinite scrolling in your React application.

## Installation

To use this hook in your React project, follow these steps:

1. Install it using npm or yarn:

   ```bash
   npm install @muriukialex/react-infinite-scroll
   # or
   yarn add @muriukialex/react-infinite-scroll
   ```

2. Import and use the `useInfiniteScroll` hook in your React component.

```javascript
import useInfiniteScroll from '@muriukialex/react-infinite-scroll';

// ... (your component code)
```

## Usage

Here's how to use the `useInfiniteScroll` hook in your React component:

```javascript
import { useState, useRef } from 'react';
import useInfiniteScroll from '@muriukialex/react-infinite-scroll';

// ... (your other imports)

const defaultParams = {
  _start: 0,
  _limit: 10,
};

export default function App() {
  const [params, updateParams] = useState(defaultParams);
  const { isLoading, items } = usePosts({ params });
  const targetRef = useRef(null);

  const onLoadMore = () => {
    if (params._start > 95) {
      return;
    }
    updateParams(prev => ({
      _start: prev._start + 10,
      _limit: prev._limit,
    }));
  };

  const [isVisible] = useInfiniteScroll({ targetRef, onLoadMore });

  if (isLoading && items.length === 0) return <h2>Is loading</h2>;

  return (
    <div className="App container">
      <div className="floating">
        {isVisible ? (
          <span>✅ Element Visible</span>
        ) : (
          <span>❌ Element Not Visible</span>
        )}
      </div>
      <h1>Infinite Scroll Example</h1>
      <Items items={items} />
      {isLoading && <div className="loader">Is loading...</div>}
      {params._start < 95 ? <div ref={targetRef} /> : <h4>Reached end</h4>}
    </div>
  );
}
```

## API

### `useInfiniteScroll(options: useInfiniteScrollProps): boolean`

- `options`: An object containing the following properties:

  - `targetRef` (required): A React ref to the target element that triggers the infinite scroll when it becomes visible in the viewport.
  - `onLoadMore` (required): A callback function to execute when the target element becomes visible, indicating the need to load more content.
  - `options` (optional): An object containing configuration options for the Intersection Observer. The default values are used if not provided.

- Returns a boolean value, `isVisible`, which indicates whether the target element is currently visible in the viewport.

## License

This project is licensed under the ISC License.

## Author

[muriukialex](https://github.com/muriukialex)
npm package: @muriukialex/react-modal-popup
Description: A package to create modal pop ups for a React application
Author: muriukialex
Latest version: 1.0.9

# @muriukialex/react-modal-popup

`@muriukialex/react-modal-popup` is a React package that allows you to easily create customizable modal pop-ups for your React applications. With this package, you can display content in modal dialogs with optional custom styling and an auto-close feature.

## Installation

To install `@muriukialex/react-modal-popup`, you can use npm or yarn:

```bash
npm install @muriukialex/react-modal-popup
# or
yarn add @muriukialex/react-modal-popup
```

## Usage

Here's how you can use the `Modal` component in your React application:

```javascript
import Modal from '@muriukialex/react-modal-popup';

const YourComponent = () => {
  const handleCloseModal = () => {
    // Handle modal close action
  };

  return (
    <Modal
      title={'Title'} {/* Add the modal title */}
	  showModal={showModal} {/* Pass the boolean property to display the modal */}
      onClose={handleCloseModal}
      customContainerStyles={/* Your custom styles */}
      customContentStyles={/* Your custom styles */}
      customModalButtonStyles={/* Your custom styles */}
    >
      {/* Your content goes here */}
    </Modal>
  );
};
```

### Props

The `Modal` component accepts the following props:

- `onClose`: A callback function to handle the modal close action.
- `showModal`: Boolean property to conditionally display the modal.
- `children`: The content you want to display within the modal. (optional)
- `customContainerStyles`: Custom styles for the modal container. (optional)
- `customContentStyles`: Custom styles for the modal content. (optional)
- `customModalButtonStyles`: Custom styles for the modal's close button. (optional)

## Example

```javascript
import Modal from '@muriukialex/react-modal-popup';

const App = () => {
  const [showModal, setShowModal] = useState(false);

  const handleCloseModal = () => {
    setShowModal(false);
  };

  const handleShowModal = () => {
    setShowModal(true);
  };

  return (
    <div className="App">
      <h1>React Pop up Modal Example</h1>
      <button onClick={handleShowModal}>Show Modal</button>

      <Modal title={'Title'} showModal={showModal} onClose={handleCloseModal}>
        Some message
      </Modal>
    </div>
  );
};
```

## License

This package is open-source and available under the ISC License.

## Issues

If you encounter any issues or have suggestions for improvement, please [submit an issue on GitHub](https://github.com/muriukialex/react-modal-popup/issues).

## Contributing

Contributions are welcome! Feel free to submit a [pull request](https://github.com/muriukialex/react-modal-popup/pulls).

---
npm package: @muriukivincent/create-ts-app
Description: Create a typescript app with a powerful template
Author: Vincent Muriuki
Latest version: 1.1.0

<h1 align="center" style="border-bottom: none;">📦🚀 @muriukivin/create-ts-template</h1>
<h3 align="center">Fully automated way of creating a typescript app</h3>
<p align="center">
  <a href="https://github.com/create-typescript-app/discussions">
    <img alt="Join the community on GitHub Discussions" src="https://img.shields.io/badge/Join%20the%20community-on%20GitHub%20Discussions-blue">
  </a>
  <a href="https://github.com/semantic-release/semantic-release/actions?query=workflow%3ATest+branch%3Amaster">
    <img alt="Build states" src="https://github.com/semantic-release/semantic-release/workflows/Test/badge.svg">
  </a> 
</p>
<p align="center">
  <a href="https://www.npmjs.com/package/semantic-release">
    <img alt="npm latest version" src="https://img.shields.io/npm/v/semantic-release/latest.svg">
  </a>
  <a href="https://www.npmjs.com/package/semantic-release">
    <img alt="npm next version" src="https://img.shields.io/npm/v/semantic-release/next.svg">
  </a>
  <a href="https://www.npmjs.com/package/semantic-release">
    <img alt="npm beta version" src="https://img.shields.io/npm/v/semantic-release/beta.svg">
  </a>
</p>

**@muriukivin/create-ts-template** automates the process of scaffolding a new typescript app including: installing dependencies.

## Highlights

## Usage example?
```
npx @muriukivincent/create-ts-app init projectname

cd projectname

yarn watch
```

Alternatively,
```
npm i -g @muriukivincent/create-ts-app

@muriukivincent/create-ts-app init projectname
```

## 🤝 Contributing

Contributions, issues and feature requests are welcome!<br />Feel free to check [issues page](https://github.com/vincentmuriuki/mpesaPhoneValidator/issues). You can also take a look at the [contributing guide](https://github.com/vincentmuriuki/create-typescript-app/blob/master/CONTRIBUTING.md).

## Show your support

Give a ⭐️ if this project helped you!

## 📝 License

Copyright © 2022 [vincentmuriuki](https://github.com/vincentmuriuki).<br />
This project is [MIT](https://github.com/vincentmuriuki/create-typescript-app/blob/master/LICENSE) licensed.
npm package: @muriukivincent/mpesaphonevalidator
Description: A package that validates phone numbers you pass to the mpesa API
Author: vincentmuriuki
Latest version: 1.0.22

<h1 align="center">@muriukivincent/mpesaphonevalidator 👋</h1>
<p>
  <img alt="Version" src="https://img.shields.io/badge/version-1.0.13-blue.svg?cacheSeconds=2592000" />
  <a href="https://github.com/vincentmuriuki/mpesaPhoneValidator#readme" target="_blank">
    <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" />
  </a>
  <a href="https://github.com/vincentmuriuki/mpesaPhoneValidator/graphs/commit-activity" target="_blank">
    <img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" />
  </a>
  <a href="https://github.com/vincentmuriuki/mpesaPhoneValidator/blob/master/LICENSE" target="_blank">
    <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" />
  </a>
</p>

> A package that validates phone numbers you pass to the mpesa API

### 🏠 [Homepage](https://github.com/vincentmuriuki/mpesaPhoneValidator#readme)

## Install

```sh
npm install @muriukivincent/mpesaphonevalidator
or
yarn add @muriukivincent/mpesaphonevalidator
```

## Usage

```sh
const phoneValidator = require('@muriukivincent/mpesaphonevalidator')

console.log(phoneValidator('254707656667'))
```

## Run tests

```sh
npm run test
```

## Author

👤 **vincentmuriuki**

* Github: [@vincentmuriuki](https://github.com/vincentmuriuki)
* LinkedIn: [@vincentmuriuki](https://linkedin.com/in/vincentmuriuki)

## 🤝 Contributing

Contributions, issues and feature requests are welcome!<br />Feel free to check [issues page](https://github.com/vincentmuriuki/mpesaPhoneValidator/issues). You can also take a look at the [contributing guide](https://github.com/vincentmuriuki/mpesaPhoneValidator/blob/master/CONTRIBUTING.md).

## Show your support

Give a ⭐️ if this project helped you!

## 📝 License

Copyright © 2022 [vincentmuriuki](https://github.com/vincentmuriuki).<br />
This project is [MIT](https://github.com/vincentmuriuki/mpesaPhoneValidator/blob/master/LICENSE) licensed.

***
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_