https://github.com/julesguesnon/bs-intersection-observer
:fire: Bindings for IntesectionObserver api
https://github.com/julesguesnon/bs-intersection-observer
bucklescript bucklescript-bindings intersection-observer reasonml
Last synced: about 1 year ago
JSON representation
:fire: Bindings for IntesectionObserver api
- Host: GitHub
- URL: https://github.com/julesguesnon/bs-intersection-observer
- Owner: JulesGuesnon
- License: other
- Created: 2019-08-26T11:10:00.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-09-01T16:14:00.000Z (almost 7 years ago)
- Last Synced: 2025-03-21T15:52:12.309Z (over 1 year ago)
- Topics: bucklescript, bucklescript-bindings, intersection-observer, reasonml
- Language: OCaml
- Homepage:
- Size: 8.79 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Bs-intersection-observer
this package make the bindings for the IntersectionObserver api.
## How to install ?
```
npm install bs-intersection-observer --save
```
```bash
yarn add bs-intersection-observer
```
Then add the dependency to you `bsconfig.json`
```json
"bs-dependencies": [
"bs-intersection-observer"
],
```
## How to use it ?
### What the package contains ?
Under the module `BsIntersectionObserver`, you'll find 2 sub module:
#### Types
`Types` is pretty obvious, it contains all the types related to the `IntersectionObserver`. You'll notice that under type there's:
- `JsT` : Javascript types
- `T` : Reason types
#### Create
Probably the one you're looking for. `Create` contains two functions:
- `newIntersectionObserver` : the direct binding from Js
- `intersectionObserver` : the IntersectionObserver adapted to Reason with some nice completion (the one you want to call)
### Example with reason-react
```reason
[@bs.val] [@bs.scope "document"]
external querySelector: string => Dom.element = "querySelector";
[@react.component]
let make = () => {
let observer =
BsIntersectionObserver.Create.intersectionObserver(
~cb=
(entries, _) => {
Belt.Array.map(entries, entry =>
if (entry.intersectionRatio > 0.) {
Js.log("Visible element");
} else {
Js.log("Not visible element");
}
)
->ignore;
();
},
~options=None,
);
React.useEffect1(
() => {
let el = querySelector(".hello");
observer.observe(el);
Some(() => observer.unobserve(el));
},
[||],
);
"Hello world"->ReasonReact.string ;
};
```