Skip to content

Commit

Permalink
[1.1.0] version 1.1.0 of use-scroll-to-bottom
Browse files Browse the repository at this point in the history
update create-react-library to version 3
change api to return a RefCallback instead of a Ref
add tests to hook
add tests to examples
add 1 example with reusing the hook
  • Loading branch information
Tudor Gergely committed Apr 3, 2020
1 parent 7fe762b commit e1ee12c
Show file tree
Hide file tree
Showing 36 changed files with 20,288 additions and 18,932 deletions.
6 changes: 6 additions & 0 deletions .eslintignore
@@ -0,0 +1,6 @@
build/
dist/
node_modules/
.snapshots/
*.min.js
*.d.ts
33 changes: 33 additions & 0 deletions .eslintrc
@@ -0,0 +1,33 @@
{
"parser": "babel-eslint",
"extends": [
"standard",
"standard-react",
"plugin:prettier/recommended",
"prettier/standard",
"prettier/react"
],
"env": {
"node": true
},
"parserOptions": {
"ecmaVersion": 9,
"ecmaFeatures": {
"legacyDecorators": true,
"jsx": true
}
},
"settings": {
"react": {
"version": "16"
}
},
"rules": {
"space-before-function-paren": 0,
"react/prop-types": 0,
"react/jsx-handler-names": 0,
"react/jsx-fragments": 0,
"react/no-unused-prop-types": 0,
"import/export": 0
}
}
36 changes: 36 additions & 0 deletions .idea/codeStyles/Project.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions .idea/codeStyles/codeStyleConfig.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

521 changes: 425 additions & 96 deletions .idea/workspace.xml

Large diffs are not rendered by default.

9 changes: 9 additions & 0 deletions .prettier.json
@@ -0,0 +1,9 @@
{
"singleQuote": true,
"jsxSingleQuote": true,
"semi": false,
"tabWidth": 2,
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "always"
}
4 changes: 2 additions & 2 deletions .travis.yml
@@ -1,4 +1,4 @@
language: node_js
node_js:
- 9
- 8
- 12
- 10
10 changes: 7 additions & 3 deletions README.md
Expand Up @@ -13,6 +13,10 @@ npm install --save use-scroll-to-bottom

## Usage

The hook returns a tuple of two things:
1. A RefCallback which needs to go on the last element of your scrolling container.
2. A boolean value which tells you whether bottom has been reached or not.

Check [demo](https://tudorgergely.github.io/use-scroll-to-bottom/) and [examples](https://github.com/tudorgergely/use-scroll-to-bottom/tree/master/example)

```tsx
Expand All @@ -21,15 +25,15 @@ import {useScrollToBottom} from 'use-scroll-to-bottom'

export default function MyComponent() {
// isBottom will be true when bottom is reached
// add ref to an element right below your scrollable one
const [ref, isBottom] = useScrollToBottom();
// add setBottomRef to the last element in your scrolling container
const [setBottomRef, isBottom] = useScrollToBottom();

return (
<div className="simple-container">
<div className="big-element">
{isBottom && "Bottom reached"}
</div>
<div ref={ref}>Bottom</div>
<div ref={setBottomRef}>Bottom</div>
</div>
)
}
Expand Down
14 changes: 14 additions & 0 deletions example/README.md
@@ -0,0 +1,14 @@
### [Examples](https://tudorgergely.github.io/use-scroll-to-bottom/)


#### To see examples:
> npm i
> npm start
Open localhost:3000 to see the examples


####To run tests on examples:
> npm test

0 comments on commit e1ee12c

Please sign in to comment.