Export types in index.ts (#4)

* Export types in index.ts

* Fix import

* Update RevealConfig + tweak how lib is exported

* Group exports

* Expose DEFAULT_REVEAL_CONFIG

* Update README.md

Co-authored-by: John Richard Chipps-Harding <john.chipps-harding@phntms.com>

* Rename `IN_BROWSER` to `IS_BROWSER`

Co-authored-by: John Richard Chipps-Harding <john.chipps-harding@phntms.com>

README.md

@@ -23,6 +23,8 @@ npm i @phntms/reveal-on-scroll
 To use, initialize a new `RevealOnScroll()` component.
 
 ```ts
+import RevealOnScroll from "@pnhtms/reveal-on-scroll";
+
 new RevealOnScroll();
 
 // Or...
@@ -38,6 +40,15 @@ new RevealOnScroll({
 
   // Threshold of element that has to be in view, before revealing element
   thresholdToRevealElements: 0.2,
+
+  // Used to querySelectAll with the following
+  revealSelector: ".reveal-on-scroll",
+
+  // Class added to element when revealed
+  visibleClass: "reveal-scrolled",
+
+  // If used alongside revealSelector, ignores reveal events till removed
+  hiddenClass: "reveal-hidden",
 });
 ```
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@phntms/reveal-on-scroll",
   "description": "Lightweight library to reveal elements on scroll.",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "homepage": "https://github.com/phantomstudios/reveal-on-scroll#readme",

src/index.ts

@@ -1,40 +1,36 @@
-import { IN_BROWSER, HAS_INTERSECTION_OBSERVER } from "./utils/platform";
-import {
-  Config,
-  DEFAULT_CONFIG,
-  HIDDEN_CLASS,
-  REVEAL_CLASS,
-  VISIBLE_CLASS,
-} from "./utils/types";
+import { RevealConfig, DEFAULT_REVEAL_CONFIG } from "./types";
+import { IS_BROWSER, HAS_INTERSECTION_OBSERVER } from "./utils/platform";
 
 class RevealOnScroll {
-  config!: Config;
+  config!: RevealConfig;
   readonly elements: Element[] = [];
   readonly _queueToShow: Element[] = [];
   private _intersectionObserver!: IntersectionObserver;
   private _canRevealNext = true;
 
-  constructor(config?: Config) {
+  constructor(config?: RevealConfig) {
     // If not in browser (SSR), ignore
-    if (!IN_BROWSER) return;
+    if (!IS_BROWSER) return;
 
+    this.config = Object.assign(DEFAULT_REVEAL_CONFIG, config);
     this.elements = this.getAllElementsToReveal();
 
     // If intersectionObserver isn't supported (IE), force show all
     if (!HAS_INTERSECTION_OBSERVER) this.revealAllElements();
     else {
-      this.config = Object.assign(DEFAULT_CONFIG, config);
       this._intersectionObserver = this._createIntersectionObserver();
       this._observeElements(this.elements);
     }
   }
 
   getAllElementsToReveal() {
-    return Array.from(document.getElementsByClassName(REVEAL_CLASS));
+    return Array.from(document.querySelectorAll(this.config.revealSelector));
   }
 
   revealAllElements() {
-    this.elements.forEach((element) => element.classList.add(VISIBLE_CLASS));
+    this.elements.forEach((element) =>
+      element.classList.add(this.config.visibleClass)
+    );
   }
 
   private _createIntersectionObserver() {
@@ -46,8 +42,10 @@ class RevealOnScroll {
             const element = entry.target as Element;
 
             const queued = this._queueToShow.includes(element);
-            const alreadyVisible = element.classList.contains(VISIBLE_CLASS);
-            const hidden = element.classList.contains(HIDDEN_CLASS);
+            const alreadyVisible = element.classList.contains(
+              this.config.visibleClass
+            );
+            const hidden = element.classList.contains(this.config.hiddenClass);
 
             if (queued || alreadyVisible || hidden) return;
             else {
@@ -102,8 +100,8 @@ class RevealOnScroll {
   }
 
   revealElement(element: Element) {
-    const alreadyVisible = element.classList.contains(VISIBLE_CLASS);
-    if (!alreadyVisible) element.classList.add(VISIBLE_CLASS);
+    const alreadyVisible = element.classList.contains(this.config.visibleClass);
+    if (!alreadyVisible) element.classList.add(this.config.visibleClass);
   }
 
   private _revealNextElement() {
@@ -120,3 +118,4 @@ class RevealOnScroll {
 }
 
 export default RevealOnScroll;
+export { RevealConfig, DEFAULT_REVEAL_CONFIG } from "./types";

src/types.ts

@@ -0,0 +1,15 @@
+export interface RevealConfig {
+  delayBetweenQueuedElements: number;
+  thresholdToRevealElements: number;
+  revealSelector: string;
+  visibleClass: string;
+  hiddenClass: string;
+}
+
+export const DEFAULT_REVEAL_CONFIG: RevealConfig = {
+  delayBetweenQueuedElements: 150,
+  thresholdToRevealElements: 0.2,
+  revealSelector: ".reveal-on-scroll",
+  visibleClass: "reveal-scrolled",
+  hiddenClass: "reveal-hidden",
+};

src/utils/platform.ts

@@ -1,3 +1,3 @@
-export const IN_BROWSER = window !== undefined;
+export const IS_BROWSER = window !== undefined;
 
 export const HAS_INTERSECTION_OBSERVER = !!window.IntersectionObserver;