React playground for writing algorithms to determine whether DOM elements are inside viewport with respect to different requirements. E.g., is an element 40% vertically visible?
The following picture shows the demo app and how it works.
With this project I want to learn or improve the following things:
- Improve my React skills in general
- What are Refs and how to use them
- How to use scroll events in React
- How to determine whether an element is inside the viewport
- How to use low-level DOM API (e.g., Element.getBoundingClientRect()) in React
- Improve my testing skills with Jest and react-testing-library
- How to read and write custom properties from Javascript.
Just clone the repo
$ git clone [email protected]:doppelmutzi/react-viewport-playground.git
Go to the root folder and install the dependencies
$ yarn
Run the demo
$ yarn start
It should open automatically on port 3000.
Execute the tests in watch mode
$ yarn test