https://github.com/manuelbento19/react-lazy
A library designed to make it easier to implement Lazy Loading in React applications. It allows components to load only when they become visible on the screen, providing a way to monitor the entry of elements into the viewport.
https://github.com/manuelbento19/react-lazy
lazy-loading nextjs react react-lazy react-lazy-load
Last synced: about 1 year ago
JSON representation
A library designed to make it easier to implement Lazy Loading in React applications. It allows components to load only when they become visible on the screen, providing a way to monitor the entry of elements into the viewport.
- Host: GitHub
- URL: https://github.com/manuelbento19/react-lazy
- Owner: manuelbento19
- License: mit
- Created: 2024-09-20T15:34:26.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-01T08:59:03.000Z (almost 2 years ago)
- Last Synced: 2025-05-20T04:48:59.610Z (about 1 year ago)
- Topics: lazy-loading, nextjs, react, react-lazy, react-lazy-load
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@bentoo/react-lazy
- Size: 58.6 KB
- Stars: 11
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @bentoo/react-lazy
A library designed to make it easier to implement `Lazy Loading` in `React` applications. It allows components to load only when they become visible on the screen, providing a way to monitor the entry of elements into the viewport.
With this tool, you can improve the performance of your application by reducing the initial loading time and ensuring that `only the necessary elements are loaded`. This approach contributes to a more agile and responsive user experience.
[](https://www.npmjs.com/package/@bentoo/react-lazy)
[](https://www.npmjs.com/package/@bentoo/react-lazy)
## Installation
You can install the package via NPM:
```bash
npm install @bentoo/react-lazy
```
or via Yarn:
```bash
yarn add @bentoo/react-lazy
```
or via pnpm:
```bash
pnpm add @bentoo/react-lazy
```
## Usage
Here’s a basic example of how to use `@bentoo/react-lazy` in your project:
```tsx
import React from 'react';
import { LazyComponent } from '@bentoo/react-lazy';
const App = () => {
return (
My image
Loading...}>
);
};
export default App;
```
### Props
`LazyComponent` accepts the following props:
| Prop | Type | Description |
|-------------|-------------|-------------------------------------------------------------------|
| `fallback` | `ReactNode` | The content to display while the component is being loaded. |
| `children` | `ReactNode` | The content that will be displayed after loading. |
## Contribution
If you would like to contribute, feel free to open a pull request or report an issue.
1. Fork the project.
2. Create your feature branch (`git checkout -b my-new-feature`).
3. Commit your changes (`git commit -m 'Adding new feature'`).
4. Push to the branch (`git push origin my-new-feature`).
5. Open a Pull Request.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.