Skip to content

Commit d97c256

Browse files
zJaaalzJaaal
authored
Merge pull request #24 from zJaaal/dev
Dev
2 parents b21776d + 8cbcd8f commit d97c256

33 files changed

+2876
-249
lines changed

‎README.md‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,23 @@
11
# React Scroll Utilities (Beta)
2+
![npm](https://img.shields.io/npm/v/react-scroll-utilities?color=%2301b37f)
3+
![npm bundle size](https://img.shields.io/bundlephobia/min/react-scroll-utilities)
4+
![npm](https://img.shields.io/npm/dw/react-scroll-utilities?color=%23620d7e)
5+
![GitHub closed issues](https://img.shields.io/github/issues-closed/zJaaal/react-scroll-utilities?color=%23895ee4)
26

37
React Scroll Utilities is a Lightweight library to track scroll events like, proximity to components, direction of scroll and render a component if it's on screen sight. I'll be adding more features and improving the functionality. I'm also open to read any request or change that you think that would be a good addition.
48

9+
10+
## Installation
11+
12+
You will need React ++16.8 to make this library work, since it use hooks as it's main construction.
13+
14+
You only need to do:
15+
```
16+
npm i react-scroll-utilities
17+
or
18+
yarn add react-scroll-utilities
19+
```
20+
521
## ScrollWatcher Component
622

723
This component works as a context to read the scroll event.
@@ -140,3 +156,82 @@ function Example() {
140156
## Directions enum
141157

142158
This lib provides an enum for TypeScript users, it just has four properties at the moment: Directions.up, Directions.down, Directions.right and Directions.left that returns the value of "UP", "DOWN" "RIGHT" and "LEFT", you can use it as helper for useDirection hook.
159+
160+
# Animations Components
161+
162+
## Circle Component
163+
164+
This component is a Circle that draws itself in response of the scroll event, it will start to draw when its on sight, any other way it will stand still at it's initial state.
165+
166+
## Usage
167+
168+
Just be sure that ScrollWatcher is at the top level of your app, any other way this component will throw an error.
169+
170+
## Props
171+
172+
173+
| prop | usage | type | default value | example values | exceptions |
174+
|:---------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:------------:|:-------------:|:----------------------------------------------------------------------------------------------------:|-------------------------------------------------------------------------------------------------------------|
175+
| backgroundColor | Color of the background to match the color of the container | string | "white" | "#F323F1", "violet", "skyblue", "rgb(255, 153, 213)"... | No exceptions, if you pass something else it won´t work, since it won't be a valid color |
176+
| color | Line color | string | "red" | "#F323F1", "violet", "skyblue", "rgb(255, 153, 213)"... | No exceptions, if you pass something else it won't work, since it won't be a valid color |
177+
| clockwise | Direction of the draw | boolean | true | true, false | No exceptions, if you pass something else it will work with the truthy/falsy JS logic |
178+
| speed | Speed of the drawing | number | 8 | 1.2, 3, 19, 5... | speed should be greater than 0, in other case it will throw an exception |
179+
| stroke | Width of the line in pixels | number | 2 | 1, 24, 3... | stroke should be greater than 0, in other case it will throw an exception |
180+
| radius | Radius of the circle in pixels | number | 200 | 100, 50, 21... | radius should be greater than 0, in other case it will throw an exception |
181+
| children | Children component to render inside the circle | ReactElement | undefined | ``` <SomeComponent/> or <div>Hello world</div>``` | If you use something else as children, expect an error from React. |
182+
| startDegree | Initial state of the line in degrees, it can start with some portion of the circle already drawed | number | 0 | 90, 180, 270, 45, 60, 75, 21.2, 3... | startDegree should be less than endDegree, in other case it will throw an exception |
183+
| endDegree | Final state of the line in degrees, to prevent the line from drawing at some point of the circle | number | 360 | 90, 283, 180, 213, 270, 34.2 | endDegree should be greater than startDegree, in other case it will throw an exception |
184+
| rotate | Initial state of the line in degrees, you can set the start of the line at 90° instead of 0°. This won't draw the circle, it will move the starting position of the line | number | 0 | 78, 90, 100, 80, 170, 45, 21.3, 56... | if you pass something else that's not a number, it won't work since it's not a valid degree (at the time). |
185+
186+
187+
## Example
188+
189+
This will render a circle that has a radius of 400 pixels, a line width of 4 pixels and will draw really slow.
190+
191+
```js
192+
//Some JSX...
193+
194+
<Circle radius={400} stroke={4} speed={2} />
195+
196+
//The rest of your JSX...
197+
```
198+
199+
## Rectangle Component
200+
201+
This component is a Rectangle that draws itself in response of the scroll event, it will start to draw when its on sight, any other way it will stand still at it's initial state.
202+
203+
## Usage
204+
205+
Just be sure that ScrollWatcher is at the top level of your app, any other way this component will throw an error.
206+
207+
## Props
208+
209+
| prop | usage | type | default value | example values | exceptions |
210+
|:---------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:------------:|:-------------:|:-------------------------------------------------------:|-------------------------------------------------------------------------------------------------------------|
211+
| backgroundColor | Color of the background to match the color of the container | string | "white" | "#F323F1", "violet", "skyblue", "rgb(255, 153, 213)"... | No exceptions, if you pass something else it won´t work, since it won't be a valid color |
212+
| color | Line color | string | "red" | "#F323F1", "violet", "skyblue", "rgb(255, 153, 213)"... | No exceptions, if you pass something else it won't work, since it won't be a valid color |
213+
| clockwise | Direction of the draw | boolean | true | true, false | No exceptions, if you pass something else it will work with the truthy/falsy JS logic |
214+
| speed | Speed of the drawing | number | 8 | 1.2, 3, 19, 5... | speed should be greater than 0, in other case it will throw an exception |
215+
| stroke | Width of the line in pixels | number | 2 | 1, 24, 3... | stroke should be greater than 0, in other case it will throw an exception |
216+
| heigth | Height of the rectangle in pixels | number | 200 | 100, 50, 21... | height should be greater than 0, in other case it will throw an exception |
217+
| width | Width of the rectangle in pixels | number | 200 | 100, 1240, 50... | width should be greater than 0, in other case it will throw an exception |
218+
| children | Children component to render inside the rectangle | ReactElement | undefined | ```<SomeComponent/> or <div>Hello world</div>``` | If you use something else as children, expect an error from React. |
219+
| startDegree | Initial state of the line in degrees, it can start with some portion of the rectangle already drawed | number | 0 | 90, 180, 270, 45, 60, 75, 21.2, 3... | startDegree should be less than endDegree, in other case it will throw an exception |
220+
| endDegree | Final state of the line in degrees, to prevent the line from drawing at some point of the rectangle | number | 360 | 90, 283, 180, 213, 270, 34.2 | endDegree should be greater than startDegree, in other case it will throw an exception |
221+
| rotate | Initial state of the line in degrees, you can set the start of the line at 90° instead of 0°. This won't draw the rectangle, it will move the starting position of the line | number | 0 | 78, 90, 100, 80, 170, 45, 21.3, 56... | if you pass something else that's not a number, it won't work since it's not a valid degree (at the time). |
222+
223+
## Example
224+
225+
This will render a rectangle that has a height of 400px , a width of 100px, a line width of 5 pixels and will draw really fast.
226+
227+
```js
228+
//Some JSX...
229+
230+
<Rectangle height={400} width={100} stroke={5} speed={12} />
231+
232+
//The rest of your JSX...
233+
```
234+
235+
## DynamicBackground Component
236+
237+
Work in progress...

0 commit comments

Comments
 (0)