Skip to content
Permalink
Browse files

🎨 📝 useViewportSpy hook + improved documentation

  • Loading branch information
antonioru committed Jan 10, 2020
1 parent 7329fa0 commit b4e0eef5729828e9f5927538783c8159116751ba
@@ -263,3 +263,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added

- Repository ownership changed from `antonioru` to `beautifulinteractions`

## [0.17.0] - 2020-01-10

### Added

- useViewportSpy hook & tests
- Improved documentation
@@ -16,8 +16,6 @@
</p>
</div>



<div>
<p align="center">
<a href="https://beautifulinteractions.github.io/beautiful-react-hooks/" target="_blank">
@@ -38,7 +36,8 @@ For this reason I've tried to sum up that gist into `beautiful-react-hooks`: a c
React hooks to possibly help other developers to speed up their development process.<br /><br />
Furthermore, I've tried to create a concise yet concrete API having in mind the code readability, focusing
to keep the learning curve as lower as possible so that the it can be used and shared in bigger teams.
<br /><br />
**-- Please before using any hook, read its documentation! --**
## ☕️ Features
@@ -60,13 +59,13 @@ to keep the learning curve as lower as possible so that the it can be used and s
## 🕺 Install
by using `npm`:
```js s
```bash
$ npm install beautiful-react-hooks
```
by using `yarn`:
```js
```bash
$ yarn add beautiful-react-hooks
```

Large diffs are not rendered by default.

This file was deleted.

@@ -9,6 +9,6 @@
</head>
<body>
<div id="rsg-root"></div>
<script src="build/bundle.94cac56a.js"></script>
<script src="build/bundle.42e0c3b1.js"></script>
</body>
</html>

Some generated files are not rendered by default. Learn more.

Some generated files are not rendered by default. Learn more.

Some generated files are not rendered by default. Learn more.

Some generated files are not rendered by default. Learn more.

@@ -0,0 +1,14 @@
## Installation

As simple as the follow:

by using `npm`:
```bash
$ npm install beautiful-react-hooks
```

by using `yarn`:

```bash
$ yarn add beautiful-react-hooks
```
@@ -0,0 +1,42 @@
# Introduction
[![Build Status](https://travis-ci.org/beautifulinteractions/beautiful-react-hooks.svg?branch=master)](https://travis-ci.org/beautifulinteractions/beautiful-react-hooks)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
![npm](https://img.shields.io/npm/v/beautiful-react-hooks)
![GitHub stars](https://img.shields.io/github/stars/beautifulinteractions/beautiful-react-hooks?style=social)

Beautiful React Hooks is a collection of beautiful (and hopefully useful) React hooks to speed-up your
components and hooks development.


## 💡 Why?

React custom hooks allow to abstract components' business logic into single reusable functions.<br />
So far, I've found that most of the hooks I've created and therefore shared between my projects have quite often a
similar gist that involves callback references, events and components' lifecycle. <br />
For this reason I've tried to sum up that gist into `beautiful-react-hooks`: a collection of (*hopefully*) useful
React hooks to possibly help other developers to speed up their development process.<br /><br />
Furthermore, I've tried to create a concise yet concrete API having in mind the code readability, focusing
to keep the learning curve as lower as possible so that the it can be used and shared in bigger teams.


## ☕️ Features

* Concise API
* Small and lightweight
* Easy to learn
* Functional approach
* Fully written in JS (although TS types are supported)

### Credits

This library is provided and sponsored by:

<div>
<p>
<a href="https://beautifulinteractions.com/">
<img src="https://beautifulinteractions.com/img/logo-colorful.svg" alt="Beautiful interactions" width="140px" />
</a>
</p>
</div>

As part of our commitment to support and provide the open source community.
Binary file not shown.
BIN +1.63 KB (110%) docs/styleguidist/doc-logo.png
Binary file not shown.
@@ -11,28 +11,41 @@ module.exports = {
pagePerSection: true,
skipComponentsWithoutExample: true,
styleguideDir: '../../dist-ghpages',
ribbon: {
url: 'https://github.com/beautifulinteractions/beautiful-react-hooks',
text: 'Fork me on GitHub',
},
sections: [
{ name: 'useGlobalEvent', content: '../useGlobalEvent.md' },
{ name: 'usePreviousValue', content: '../usePreviousValue.md' },
{ name: 'useValueHistory', content: '../useValueHistory.md' },
{ name: 'useMediaQuery', content: '../useMediaQuery.md' },
{ name: 'useOnlineState', content: '../useOnlineState.md' },
{ name: 'useGeolocation', content: '../useGeolocation.md' },
{ name: 'useGeolocationState', content: '../useGeolocationState.md' },
{ name: 'useGeolocationEvents', content: '../useGeolocationEvents.md' },
{ name: 'useMouse', content: '../useMouse.md' },
{ name: 'useMouseState', content: '../useMouseState.md' },
{ name: 'useMouseEvents', content: '../useMouseEvents.md' },
{ name: 'useLifecycle', content: '../useLifecycle.md' },
{ name: 'useDidMount', content: '../useDidMount.md' },
{ name: 'useWillUnMount', content: '../useWillUnmount.md' },
{ name: 'useCallbackRef', content: '../useCallbackRef.md' },
{ name: 'useWindowResize', content: '../useWindowResize.md' },
{ name: 'useWindowScroll', content: '../useWindowScroll.md' },
{ name: 'useTimeout', content: '../useTimeout.md' },
{ name: 'useInterval', content: '../useInterval.md' },
{ name: 'useDebouncedFn', content: '../useDebouncedFn.md' },
{ name: 'useThrottledFn', content: '../useThrottledFn.md' },
{ name: 'Introduction', content: '../Introduction.md', sectionDepth: 1, },
{ name: 'Installation', content: '../Installation.md', sectionDepth: 1, },
{
name: 'Hooks',
sectionDepth: 2,
sections: [
{ name: 'useGlobalEvent', content: '../useGlobalEvent.md' },
{ name: 'usePreviousValue', content: '../usePreviousValue.md' },
{ name: 'useValueHistory', content: '../useValueHistory.md' },
{ name: 'useMediaQuery', content: '../useMediaQuery.md' },
{ name: 'useOnlineState', content: '../useOnlineState.md' },
{ name: 'useViewportSpy', content: '../useViewportSpy.md' },
{ name: 'useGeolocation', content: '../useGeolocation.md' },
{ name: 'useGeolocationState', content: '../useGeolocationState.md' },
{ name: 'useGeolocationEvents', content: '../useGeolocationEvents.md' },
{ name: 'useMouse', content: '../useMouse.md' },
{ name: 'useMouseState', content: '../useMouseState.md' },
{ name: 'useMouseEvents', content: '../useMouseEvents.md' },
{ name: 'useLifecycle', content: '../useLifecycle.md' },
{ name: 'useDidMount', content: '../useDidMount.md' },
{ name: 'useWillUnMount', content: '../useWillUnmount.md' },
{ name: 'useCallbackRef', content: '../useCallbackRef.md' },
{ name: 'useWindowResize', content: '../useWindowResize.md' },
{ name: 'useWindowScroll', content: '../useWindowScroll.md' },
{ name: 'useTimeout', content: '../useTimeout.md' },
{ name: 'useInterval', content: '../useInterval.md' },
{ name: 'useDebouncedFn', content: '../useDebouncedFn.md' },
{ name: 'useThrottledFn', content: '../useThrottledFn.md' },
],
},
],
require: [path.join(__dirname, 'setup.js')],
// Override Styleguidist components
@@ -9,52 +9,21 @@ module.exports = {
favicon: 'https://beautifulinteractions.com/favicons/bi-favicon.ico',
},
styles: {
Header: {
logo: {
padding: '0',
}
},
Logo: {
logo: {
padding: '0',
},
},
SectionHeading: {
wrapper: {
display: 'none',
},
},
TableOfContents: {
search: {
display: 'none',
},
input: {
borderRadius: 0,
backgroundColor: 'transparent',
border: 0,
paddingLeft: 0,
outline: 0,
color: 'white',
borderBottom: '1px solid white',
'&:focus': {
borderColor: 'rgba(255, 255, 255, 0.25)',
boxShadow: 'unset',
},
'&::placeholder': {
color: 'rgba(255, 255, 255, 0.25)',
},
},
},
Heading: {
heading: {
color: '#0F8B8D',
color: '#1D6C8B',
fontFamily: '\'Ubuntu\', sans-serif',
},
},
Code: {
code: {
fontFamily: '\'Ubuntu Mono\', sans-serif',
backgroundColor: '#D36A81',
backgroundColor: '#BE496E',
color: '#fff',
fontWeight: '400',
padding: '0 5px',
@@ -71,21 +40,22 @@ module.exports = {
background: 'url(./docs-logo.png) no-repeat left center',
borderBottom: 'none',
backgroundSize: 'contain',
margin: '15px 20px',
height: '50px',
margin: '16px 16px',
height: '30px',
padding: 0,
},
sidebar: {
border: 0,
width: '200px',
background: 'linear-gradient(#FFF,#F1F1F7)',
width: '260px',
background: 'white',
boxShadow: '0 0 20px 0 rgba(20, 20, 20, 0.1)',
color: '#0F8B8D',
color: '#1D6C8B',
},
content: {
maxWidth: '820px',
},
root: {
background: '#f5f8fd',
background: '#FBFAF9',
},
},
Playground: {
@@ -66,7 +66,6 @@ const ComponentDidMount = () => {
<ComponentDidMount />
```


#### ✅ Pro tip:

When using a React function component you should not really think of it in terms of "lifecycle".
@@ -23,9 +23,7 @@ const PositionReporter = () => {
onChange(() => {
console.log('Position changed...');
});
console.log('PORCO MADONNOLO', geoState);
return (
<DisplayDemo>
The current position is:

0 comments on commit b4e0eef

Please sign in to comment.
You can’t perform that action at this time.