Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 4a24783

Browse files
Abdulnasır OlcanAbdulnasır Olcan
Abdulnasır Olcan
authored and
Abdulnasır Olcan
committed
🚀 updated
1 parent a434fd8 commit 4a24783

File tree

5 files changed

+52
-39
lines changed

5 files changed

+52
-39
lines changed

‎README.md‎

Lines changed: 44 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
<br>
88
</h1>
99

10-
1110
<div align="center">
1211

1312
[![npm](https://img.shields.io/npm/v/react-lazyload-component?style=flat-square)](https://www.npmjs.com/package/react-lazyload-component)
@@ -19,7 +18,7 @@
1918

2019
## :books: Introduction
2120

22-
React Component to lazy load and other components/elements and use the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
21+
Fast 1.15kB, Gzip 0.63KB, React Component to lazy load and other components/elements and use the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
2322

2423
## :rocket: Example
2524

@@ -32,98 +31,112 @@ Check our 👉 [example](https://react-lazyload-component.vercel.app/)
3231
npm install react-lazyload-component
3332
# install with yarn
3433
yarn add react-lazyload-component
35-
# install with pnpm
34+
# install with pnpm
3635
pnpm add react-lazyload-component
3736
```
3837

3938
## Example Repo
40-
* [In Repo](https://github.com/jsdeveloperr/react-lazyload-component/blob/master/example)
39+
40+
- [In Repo](https://github.com/jsdeveloperr/react-lazyload-component/blob/master/example)
4141

4242
## Examples
4343

4444
### Basic Usage
45+
4546
```tsx
46-
import React from 'react';
47-
import LazyLoad from 'react-lazyload-component';
47+
import React from "react";
48+
import LazyLoad from "react-lazyload-component";
4849

4950
const MyComponent = () => (
50-
<div>
51-
<LazyLoad>
52-
<img src='https://images.pexels.com/photos/3748221/pexels-photo-3748221.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' />
53-
</LazyLoad>
54-
</div>
55-
)
51+
<LazyLoad>
52+
<img src="https://images.pexels.com/photos/3748221/pexels-photo-3748221.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
53+
</LazyLoad>
54+
);
5655
```
5756

5857
### Loading the image 100px prior to scroll
5958

6059
```tsx
6160
const MyComponent = () => (
62-
<div>
63-
<LazyLoad rootMargin={100}>
64-
<img src='https://images.pexels.com/photos/3748221/pexels-photo-3748221.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' />
65-
</LazyLoad>
66-
</div>
67-
)
61+
<LazyLoad rootMargin={100}>
62+
<img src="https://images.pexels.com/photos/3748221/pexels-photo-3748221.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
63+
</LazyLoad>
64+
);
6865
```
6966

70-
### Loading image only when 95% of it is in the viewport. **note** a rootMargin must be specified.
67+
### Loading image only when 15% of it is in the viewport.
7168

7269
```tsx
7370
const MyComponent = () => (
74-
<div>
75-
<LazyLoad rootMargin={100} threshold={0.15}>
76-
<img src='https://images.pexels.com/photos/3748221/pexels-photo-3748221.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' />
77-
</LazyLoad>
78-
</div>
79-
)
71+
<LazyLoad rootMargin={100} threshold={0.15}>
72+
<img src="https://images.pexels.com/photos/3748221/pexels-photo-3748221.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
73+
</LazyLoad>
74+
);
8075
```
8176

8277
### Performing a side effect once your image is loaded
8378

8479
```tsx
8580
const MyComponent = () => (
86-
<div>
87-
<LazyLoad rootMargin={400} threshold={0.15} freezeOnceVisible={true}>
88-
<img src='https://images.pexels.com/photos/3748221/pexels-photo-3748221.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' />
81+
<LazyLoad rootMargin={400} threshold={0.15} freezeOnceVisible={true}>
82+
<img src="https://images.pexels.com/photos/3748221/pexels-photo-3748221.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
83+
</LazyLoad>
84+
);
85+
```
86+
87+
### Suspense and Lazy import
88+
89+
```tsx
90+
import React, { Suspense } from "react";
91+
const LazyLoad = React.lazy(() => import("react-lazyload-component"));
92+
93+
const MyComponent = () => (
94+
<Suspense fallback={<div>Loading...</div>}>
95+
<LazyLoad rootMargin={100}>
96+
<img src="https://images.pexels.com/photos/3748221/pexels-photo-3748221.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
8997
</LazyLoad>
90-
</div>
91-
)
98+
</Suspense>
99+
);
92100
```
93101

94102
## Props
95103

96104
#### tag
105+
97106
Type: `ComponentType | keyof JSX.IntrinsicElements`
98107

99108
The `tag` option allows you to set the html element's tag even when it has no content.
100109

101110
#### rootMargin
111+
102112
Type: `String` Default: `0%`
103113

104114
The `rootMargin` option allows you to specify how far below, above, to the left, and to the right of the viewport you want to _begin_ displaying your content. If you specify `0`, your content will be displayed as soon as it is visible in the viewport, if you want to load _100px_ below or above the viewport, use `100`.
105115

106116
#### threshold
117+
107118
Type: `number | number[]` Default: `0`
108119

109120
This `threshold` option allows you to specify how much of the element must be shown on the screen prior to loading. This requires a _width_ and _height_ to be set on the `<LazyLoad>` component in order for the browser to calcualte the viewable area.
110121

111122
#### className
123+
112124
Type: `String`
113125

114126
The `className` option allows you to set the element's className even when it has no content.
115127

116128
#### style
129+
117130
Type: `CSSProperties`
118131

119132
The `style` option allows you to set the element's style even when it has no content.
120133

121134
#### freezeOnceVisible
135+
122136
Type `Boolean`
123137

124138
A Boolean to execute when the content appears on the screen.
125139

126-
127140
## Building LazyLoad
128141

129142
```

‎example/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
5+
<link rel="icon" type="image/svg+xml" href="/assets/logo-lazy.gif" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>React Lazy Load Component</title>
88
</head>

‎example/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
{
22
"name": "example",
33
"private": true,
4-
"version": "0.0.0",
4+
"version": "1.0.0",
55
"type": "module",
66
"scripts": {
77
"dev": "vite",
88
"build": "tsc && vite build",
9-
"preview": "vite preview"
9+
"start": "vite preview"
1010
},
1111
"dependencies": {
1212
"react": "^18.2.0",

‎example/postcss.config.cjs‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
module.exports = {
2-
plugins: [
3-
require("tailwindcss"),
4-
require("autoprefixer")
5-
],
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
}
66
}

‎example/tailwind.config.cjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/** @type {import('tailwindcss').Config} */
22
module.exports = {
33
content: [
4-
"./index.html",
4+
'./**/*.html',
55
"./src/**/*.{js,ts,jsx,tsx}",
66
],
77
theme: {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /