Skip to content

Commit 3d003dc

Browse files
amorriscodeamorriscode
committed
Initial commit
0 parents  commit 3d003dc

23 files changed

+24464
-0
lines changed

‎.editorconfig

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

‎.env

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
SKIP_PREFLIGHT_CHECK=true

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
dist
3+
.DS_Store

‎.travis.yml

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
language: node_js
2+
node_js:
3+
- 8
4+
env:
5+
- SKIP_PREFLIGHT_CHECK=true

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020 Anthony Morris
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# use-overflow
2+
3+
> A React Hook that allows you to detect X and Y overflow.
4+
5+
[![NPM](https://img.shields.io/npm/v/use-overflow.svg)](https://www.npmjs.com/package/use-overflow) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
6+
7+
## Install
8+
9+
```bash
10+
npm install --save use-overflow
11+
OR
12+
yarn add use-overflow
13+
```
14+
15+
## Usage
16+
17+
```tsx
18+
import * as React from 'react'
19+
20+
import { useMyHook } from 'use-overflow'
21+
22+
const Example = () => {
23+
const horizonstalRef = React.useRef(null);
24+
const { refXOverflowing, refXScrollBegin, refXScrollEnd } = useOverflow(horizonstalRef);
25+
26+
const verticalRef = React.useRef(null);
27+
const { refYOverflowing, refYScrollBegin, refYScrollEnd } = useOverflow(verticalRef);
28+
29+
return (
30+
<div>
31+
{/* Conditional do stuff based on overflow! */}
32+
</div>
33+
)
34+
}
35+
```
36+
37+
## License
38+
39+
MIT © [amorriscode](https://github.com/amorriscode)
40+
41+
---
42+
43+
This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).

‎example/.env

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
SKIP_PREFLIGHT_CHECK=true

‎example/README.md

+2,026
Large diffs are not rendered by default.

‎example/package.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "use-overflow-example",
3+
"homepage": "https://amorriscode.github.io/use-overflow",
4+
"version": "0.0.0",
5+
"license": "MIT",
6+
"private": true,
7+
"dependencies": {
8+
"react": "link:../node_modules/react",
9+
"react-dom": "^16.9.0",
10+
"react-scripts": "^3.0.1",
11+
"use-overflow": "link:.."
12+
},
13+
"scripts": {
14+
"start": "react-scripts start",
15+
"build": "react-scripts build",
16+
"test": "react-scripts test --env=jsdom",
17+
"eject": "react-scripts eject"
18+
},
19+
"browserslist": [
20+
">0.2%",
21+
"not dead",
22+
"not ie <= 11",
23+
"not op_mini all"
24+
]
25+
}

‎example/public/index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<meta name="theme-color" content="#000000">
7+
8+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
9+
10+
<title>use-overflow</title>
11+
</head>
12+
13+
<body>
14+
<noscript>
15+
You need to enable JavaScript to run this app.
16+
</noscript>
17+
18+
<div id="root"></div>
19+
</body>
20+
</html>

‎example/public/manifest.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"short_name": "use-overflow",
3+
"name": "use-overflow",
4+
"start_url": "./index.html",
5+
"display": "standalone",
6+
"theme_color": "#000000",
7+
"background_color": "#ffffff"
8+
}

‎example/src/App.js

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import React from 'react';
2+
3+
import { useOverflow } from 'use-overflow';
4+
5+
const App = () => {
6+
const horizonstalRef = React.useRef(null);
7+
const { refXOverflowing, refXScrollBegin, refXScrollEnd } = useOverflow(horizonstalRef);
8+
9+
const verticalRef = React.useRef(null);
10+
const { refYOverflowing, refYScrollBegin, refYScrollEnd } = useOverflow(verticalRef);
11+
12+
return (
13+
<div className="container">
14+
<div className="horizontal-overflow-container">
15+
<div className="horizontal-overflow-content" ref={horizonstalRef}>
16+
Scroll me! -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
17+
</div>
18+
19+
{refXOverflowing && !refXScrollBegin && <div className="horizontal-gradient-left"></div>}
20+
21+
{refXOverflowing && !refXScrollEnd && <div className="horizontal-gradient-right"></div>}
22+
</div>
23+
24+
<div className="vertical-overflow-container">
25+
<div className="vertical-overflow-content" ref={verticalRef}>
26+
<div>Scroll me!</div>
27+
<div>|</div>
28+
<div>|</div>
29+
<div>|</div>
30+
<div>|</div>
31+
<div>|</div>
32+
<div>|</div>
33+
<div>|</div>
34+
<div>|</div>
35+
<div>|</div>
36+
<div>|</div>
37+
<div>|</div>
38+
<div>|</div>
39+
<div>|</div>
40+
<div>|</div>
41+
<div>|</div>
42+
<div>|</div>
43+
<div>|</div>
44+
<div>|</div>
45+
<div>|</div>
46+
<div>|</div>
47+
<div>|</div>
48+
<div>|</div>
49+
<div>|</div>
50+
<div>|</div>
51+
<div>|</div>
52+
<div>|</div>
53+
<div>|</div>
54+
<div>|</div>
55+
<div>|</div>
56+
<div>|</div>
57+
<div>|</div>
58+
<div>|</div>
59+
<div>|</div>
60+
<div>|</div>
61+
<div>|</div>
62+
<div>|</div>
63+
<div>|</div>
64+
<div>|</div>
65+
<div>|</div>
66+
<div>|</div>
67+
<div>|</div>
68+
<div>|</div>
69+
<div>|</div>
70+
<div>|</div>
71+
<div>|</div>
72+
<div>|</div>
73+
<div>|</div>
74+
<div>|</div>
75+
<div>|</div>
76+
<div>|</div>
77+
<div>|</div>
78+
<div>|</div>
79+
<div>|</div>
80+
<div>|</div>
81+
<div>|</div>
82+
<div>|</div>
83+
<div>|</div>
84+
<div>|</div>
85+
<div>|</div>
86+
<div>|</div>
87+
<div>|</div>
88+
<div>|</div>
89+
<div>|</div>
90+
<div>|</div>
91+
<div>V</div>
92+
</div>
93+
94+
{refYOverflowing && !refYScrollBegin && <div className="vertical-gradient-top"></div>}
95+
96+
{refYOverflowing && !refYScrollEnd && <div className="vertical-gradient-bottom"></div>}
97+
</div>
98+
</div>
99+
);
100+
}
101+
102+
export default App;

‎example/src/index.css

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
font-family: sans-serif;
5+
background: #1f1837;
6+
color: white;
7+
}
8+
9+
.container {
10+
width: 100vw;
11+
height: 100vh;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
flex-direction: column;
16+
}
17+
18+
.horizontal-overflow-container {
19+
width: 50%;
20+
position: relative;
21+
margin-bottom: 2rem;
22+
padding: 2rem;
23+
border: 2px solid #e200b9;
24+
}
25+
26+
.horizontal-overflow-content {
27+
width: 100%;
28+
padding: 20px 0px;
29+
overflow-x: scroll;
30+
white-space: nowrap;
31+
}
32+
33+
.horizontal-gradient-left {
34+
pointer-events: none;
35+
position: absolute;
36+
height: 100%;
37+
width: 25%;
38+
top: 0;
39+
left: 0;
40+
background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(226,0,185,1) 100%);
41+
}
42+
43+
.horizontal-gradient-right {
44+
pointer-events: none;
45+
position: absolute;
46+
height: 100%;
47+
width: 25%;
48+
top: 0;
49+
right: 0;
50+
background: linear-gradient(270deg, rgba(226,0,185,1) 0%, rgba(255,255,255,0) 100%);
51+
}
52+
53+
.vertical-overflow-container {
54+
position: relative;
55+
height: 50%;
56+
width: 50%;
57+
padding: 2rem;
58+
border: 2px solid #e200b9;
59+
}
60+
61+
.vertical-overflow-content {
62+
height: 100%;
63+
width: 100%;
64+
overflow-y: scroll;
65+
display: flex;
66+
align-items: center;
67+
flex-direction: column;
68+
}
69+
70+
.vertical-gradient-top {
71+
pointer-events: none;
72+
position: absolute;
73+
height: 25%;
74+
top: 0;
75+
left: 0;
76+
right: 0;
77+
background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(226,0,185,1) 100%);
78+
}
79+
80+
.vertical-gradient-bottom {
81+
pointer-events: none;
82+
position: absolute;
83+
height: 25%;
84+
bottom: 0;
85+
left: 0;
86+
right: 0;
87+
background: linear-gradient(0deg, rgba(226,0,185,1) 0%, rgba(255,255,255,0) 100%);
88+
}

‎example/src/index.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react'
2+
import ReactDOM from 'react-dom'
3+
4+
import './index.css'
5+
import App from './App'
6+
7+
ReactDOM.render(<App />, document.getElementById('root'))

0 commit comments

Comments
 (0)