Skip to content

Commit 975bff0

Browse files
thebuilderthebuilder
authored
chore: upgrade dependencies (#440)
1 parent e99172e commit 975bff0

File tree

7 files changed

+975
-936
lines changed

7 files changed

+975
-936
lines changed

‎.github/ISSUE_TEMPLATE/bug_report.md‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,32 @@ about: Create a report to help us improve
44
title: ''
55
labels: ''
66
assignees: ''
7-
87
---
98

10-
**Describe the bug**
11-
A clear and concise description of what the bug is.
9+
**Describe the bug** A clear and concise description of what the bug is.
1210

13-
**To Reproduce**
14-
Try and recreate the issue in a **Codesandbox**:
11+
**To Reproduce** Try and recreate the issue in a **Codesandbox**:
1512

1613
- [Edit useInView](https://codesandbox.io/s/useinview-ud2vo?fontsize=14&hidenavigation=1&theme=dark)
1714
- [Edit InView render props](https://codesandbox.io/s/inview-render-props-hvhcb?fontsize=14&hidenavigation=1&theme=dark)
1815
- [Edit InView plain children](https://codesandbox.io/s/inview-plain-children-vv51y?fontsize=14&hidenavigation=1&theme=dark)
1916

20-
**Expected behavior**
21-
A clear and concise description of what you expected to happen.
17+
**Expected behavior** A clear and concise description of what you expected to
18+
happen.
2219

23-
**Screenshots**
24-
If applicable, add screenshots to help explain your problem.
20+
**Screenshots** If applicable, add screenshots to help explain your problem.
2521

2622
**Desktop (please complete the following information):**
27-
- OS: [e.g. iOS]
28-
- Browser [e.g. chrome, safari]
29-
- Version [e.g. 22]
23+
24+
- OS: [e.g. iOS]
25+
- Browser [e.g. chrome, safari]
26+
- Version [e.g. 22]
3027

3128
**Smartphone (please complete the following information):**
32-
- Device: [e.g. iPhone6]
33-
- OS: [e.g. iOS8.1]
34-
- Browser [e.g. stock browser, safari]
35-
- Version [e.g. 22]
3629

37-
**Additional context**
38-
Add any other context about the problem here.
30+
- Device: [e.g. iPhone6]
31+
- OS: [e.g. iOS8.1]
32+
- Browser [e.g. stock browser, safari]
33+
- Version [e.g. 22]
34+
35+
**Additional context** Add any other context about the problem here.

‎.github/ISSUE_TEMPLATE/feature_request.md‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,16 @@ about: Suggest an idea for this project
44
title: ''
55
labels: ''
66
assignees: ''
7-
87
---
98

10-
**Is your feature request related to a problem? Please describe.**
11-
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
9+
**Is your feature request related to a problem? Please describe.** A clear and
10+
concise description of what the problem is. Ex. I'm always frustrated when [...]
1211

13-
**Describe the solution you'd like**
14-
A clear and concise description of what you want to happen.
12+
**Describe the solution you'd like** A clear and concise description of what you
13+
want to happen.
1514

16-
**Describe alternatives you've considered**
17-
A clear and concise description of any alternative solutions or features you've considered.
15+
**Describe alternatives you've considered** A clear and concise description of
16+
any alternative solutions or features you've considered.
1817

19-
**Additional context**
20-
Add any other context or screenshots about the feature request here.
18+
**Additional context** Add any other context or screenshots about the feature
19+
request here.

‎README.md‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22

33
[![Version Badge][npm-version-svg]][package-url]
44
[![GZipped size][npm-minzip-svg]][bundlephobia-url]
5-
[![Test][test-image]][test-url]
6-
[![License][license-image]][license-url]
5+
[![Test][test-image]][test-url] [![License][license-image]][license-url]
76
[![Downloads][downloads-image]][downloads-url]
87

98
React implementation of the
@@ -19,10 +18,11 @@ to tell you when an element enters or leaves the viewport. Contains both a
1918

2019
- 🎣 **Hooks or Component API** - With `useInView` it's easier than ever to
2120
monitor elements
22-
- ⚡️ **Optimized performance** - Reuses Intersection Observer instances
23-
where possible
21+
- ⚡️ **Optimized performance** - Reuses Intersection Observer instances where
22+
possible
2423
- ⚙️ **Matches native API** - Intuitive to use
25-
- 🧪 **Ready to test** - Mocks the Intersection Observer for easy testing with [Jest](https://jestjs.io/)
24+
- 🧪 **Ready to test** - Mocks the Intersection Observer for easy testing with
25+
[Jest](https://jestjs.io/)
2626
- 🌳 **Tree-shakeable** - Only include the parts you use
2727
- 💥 **Tiny bundle** [~1.7 kB gzipped][bundlephobia-url]
2828

@@ -145,16 +145,16 @@ export default Component;
145145
Provide these as props on the **`<InView />`** component or as the options
146146
argument for the hooks.
147147

148-
| Name | Type | Default | Required | Description |
149-
| ---------------------- | ------------------ | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
150-
| **root** | Element | document | false | The IntersectionObserver interface's read-only root property identifies the Element or Document whose bounds are treated as the bounding box of the viewport for the element which is the observer's target. If the root is null, then the bounds of the actual document viewport are used. |
151-
| **rootMargin** | string | '0px' | false | Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). |
152-
| **threshold** | number \| number[] | 0 | false | Number between 0 and 1 indicating the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points. |
153-
| **trackVisibility** 🧪 | boolean | false | false | A boolean indicating whether this IntersectionObserver will track changes in a target’s visibility. |
154-
| **delay** 🧪 | number | undefined | false | A number indicating the minimum delay in milliseconds between notifications from this observer for a given target. This must be set to at least `100` if `trackVisibility` is `true`. |
155-
| **skip** | boolean | false | false | Skip creating the IntersectionObserver. You can use this to enable and disable the observer as needed. If `skip` is set while `inView`, the current state will still be kept. |
156-
| **triggerOnce** | boolean | false | false | Only trigger the observer once. |
157-
| **initialInView** | boolean | false | false | Set the initial value of the `inView` boolean. This can be used if you expect the element to be in the viewport to start with, and you want to trigger something when it leaves. |
148+
| Name | Type | Default | Required | Description |
149+
| ---------------------- | ---------------------- | --------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
150+
| **root** | `Element` | document | false | The IntersectionObserver interface's read-only root property identifies the Element or Document whose bounds are treated as the bounding box of the viewport for the element which is the observer's target. If the root is `null`, then the bounds of the actual document viewport are used. |
151+
| **rootMargin** | `string` | '0px' | false | Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). |
152+
| **threshold** | `number` \| `number[]` | 0 | false | Number between 0 and 1 indicating the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points. |
153+
| **trackVisibility** 🧪 | `boolean` | false | false | A boolean indicating whether this IntersectionObserver will track changes in a target’s visibility. |
154+
| **delay** 🧪 | `number` | undefined | false | A number indicating the minimum delay in milliseconds between notifications from this observer for a given target. This must be set to at least `100` if `trackVisibility` is `true`. |
155+
| **skip** | `boolean` | false | false | Skip creating the IntersectionObserver. You can use this to enable and disable the observer as needed. If `skip` is set while `inView`, the current state will still be kept. |
156+
| **triggerOnce** | `boolean` | false | false | Only trigger the observer once. |
157+
| **initialInView** | `boolean` | false | false | Set the initial value of the `inView` boolean. This can be used if you expect the element to be in the viewport to start with, and you want to trigger something when it leaves. |
158158

159159
### InView Props
160160

@@ -345,13 +345,16 @@ async function loadPolyfills() {
345345
346346
[package-url]: https://npmjs.org/package/react-intersection-observer
347347
[npm-version-svg]: https://img.shields.io/npm/v/react-intersection-observer.svg
348-
[npm-minzip-svg]: https://img.shields.io/bundlephobia/minzip/react-intersection-observer.svg
348+
[npm-minzip-svg]:
349+
https://img.shields.io/bundlephobia/minzip/react-intersection-observer.svg
349350
[bundlephobia-url]:
350351
https://bundlephobia.com/result?p=react-intersection-observer
351352
[license-image]: http://img.shields.io/npm/l/react-intersection-observer.svg
352353
[license-url]: LICENSE
353354
[downloads-image]: http://img.shields.io/npm/dm/react-intersection-observer.svg
354355
[downloads-url]:
355356
http://npm-stat.com/charts.html?package=react-intersection-observer
356-
[test-image]: https://github.com/thebuilder/react-intersection-observer/workflows/Test/badge.svg
357-
[test-url]: https://github.com/thebuilder/react-intersection-observer/actions?query=workflow%3ATest
357+
[test-image]:
358+
https://github.com/thebuilder/react-intersection-observer/workflows/Test/badge.svg
359+
[test-url]:
360+
https://github.com/thebuilder/react-intersection-observer/actions?query=workflow%3ATest

‎package.json‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -126,63 +126,64 @@
126126
"jest-setup.js"
127127
]
128128
},
129-
"dependencies": {},
129+
"dependencies": {
130+
},
130131
"peerDependencies": {
131132
"react": "^15.0.0 || ^16.0.0 || ^17.0.0|| ^18.0.0"
132133
},
133134
"devDependencies": {
134-
"@babel/cli": "^7.12.8",
135-
"@babel/core": "^7.12.9",
135+
"@babel/cli": "^7.12.10",
136+
"@babel/core": "^7.12.10",
136137
"@babel/plugin-proposal-class-properties": "^7.12.1",
137-
"@babel/plugin-transform-runtime": "^7.11.5",
138-
"@babel/preset-env": "^7.12.7",
138+
"@babel/plugin-transform-runtime": "^7.12.10",
139+
"@babel/preset-env": "^7.12.11",
139140
"@babel/preset-flow": "^7.9.0",
140-
"@babel/preset-react": "^7.12.7",
141+
"@babel/preset-react": "^7.12.10",
141142
"@babel/preset-typescript": "^7.12.7",
142-
"@storybook/addon-actions": "^6.1.9",
143-
"@storybook/addon-controls": "^6.1.9",
144-
"@storybook/addon-docs": "^6.1.9",
145-
"@storybook/addon-viewport": "^6.1.9",
146-
"@storybook/react": "^6.1.9",
147-
"@storybook/theming": "^6.1.9",
148-
"@testing-library/jest-dom": "^5.11.6",
149-
"@testing-library/react": "^11.2.2",
150-
"@types/jest": "^26.0.15",
143+
"@storybook/addon-actions": "^6.1.14",
144+
"@storybook/addon-controls": "^6.1.14",
145+
"@storybook/addon-docs": "^6.1.14",
146+
"@storybook/addon-viewport": "^6.1.14",
147+
"@storybook/react": "^6.1.14",
148+
"@storybook/theming": "^6.1.14",
149+
"@testing-library/jest-dom": "^5.11.9",
150+
"@testing-library/react": "^11.2.3",
151+
"@types/jest": "^26.0.20",
151152
"@types/react": "^17.0.0",
152153
"@types/react-dom": "^17.0.0",
153-
"@typescript-eslint/eslint-plugin": "^4.9.0",
154-
"@typescript-eslint/parser": "^4.9.0",
154+
"@typescript-eslint/eslint-plugin": "^4.13.0",
155+
"@typescript-eslint/parser": "^4.13.0",
155156
"autoprefixer": "^9",
156157
"babel-eslint": "^10.1.0",
157158
"babel-jest": "^26.6.3",
158159
"babel-loader": "^8.2.2",
159160
"babel-plugin-dev-expression": "^0.2.2",
160161
"concurrently": "^5.1.0",
161162
"coveralls": "^3.0.11",
162-
"eslint": "^7.14.0",
163+
"eslint": "^7.18.0",
163164
"eslint-config-react-app": "^6.0.0",
164165
"eslint-plugin-flowtype": "^5.2.0",
165166
"eslint-plugin-import": "^2.20.2",
166167
"eslint-plugin-jsx-a11y": "^6.4.1",
167-
"eslint-plugin-react": "^7.21.5",
168+
"eslint-plugin-react": "^7.22.0",
168169
"eslint-plugin-react-hooks": "^4.2.0",
169-
"framer-motion": "^2.9.4",
170-
"husky": "^4.2.5",
171-
"intersection-observer": "^0.11.0",
170+
"framer-motion": "^3.2.1",
171+
"husky": "^4.3.8",
172+
"intersection-observer": "^0.12.0",
172173
"jest": "^26.6.3",
173174
"lint-staged": "^10.5.2",
174-
"microbundle": "^0.12.3",
175+
"microbundle": "^0.13.0",
175176
"npm-run-all": "^4.1.5",
176-
"postcss": "^7",
177+
"postcss": "^7.0.35",
177178
"prettier": "^2.2.0",
178179
"prettier-plugin-pkg": "^0.8.0",
179-
"prettier-plugin-tailwind": "^2.2.2",
180+
"prettier-plugin-tailwind": "^2.2.8",
180181
"react": "^17.0.1",
181182
"react-dom": "^17.0.1",
182183
"react-test-renderer": "^17.0.1",
183184
"storybook-dark-mode": "^1.0.3",
184185
"tailwindcss": "npm:@tailwindcss/postcss7-compat",
185-
"typescript": "^4.1.2"
186+
"typescript": "^4.1.3"
186187
},
187188
"resolutions": {
188189
"react": "^17.0.1",

‎src/stories/Hooks.story.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -189,9 +189,9 @@ const VisibilityTemplate: Story<IntersectionOptions> = (args) => {
189189

190190
return (
191191
<div ref={ref} className="container mx-auto my-4">
192-
<div className="bg-gray-800 rounded-md mx-auto my-8 max-w-3xl p-4 relative text-center text-white">
192+
<div className="relative mx-auto my-8 p-4 max-w-3xl text-center text-white bg-gray-800 rounded-md">
193193
<h2 className="text-2xl font-bold">Track Visibility</h2>
194-
<p className="leading-normal my-4">
194+
<p className="my-4 leading-normal">
195195
Use the new IntersectionObserver v2 to track if the object is visible.
196196
Try dragging the box on top of it. If the feature is unsupported, it
197197
will always return `isVisible`.
@@ -200,7 +200,7 @@ const VisibilityTemplate: Story<IntersectionOptions> = (args) => {
200200
drag
201201
dragElastic={0.2}
202202
dragConstraints={ref}
203-
className="left-1/2 bg-green-500 rounded-md cursor-move inline-block font-bold px-4 py-2"
203+
className="left-1/2 inline-block px-4 py-2 font-bold bg-green-500 rounded-md cursor-move"
204204
>
205205
Drag me
206206
</motion.div>

0 commit comments

Comments
 (0)