feat: Support TypeScript

.github/workflows/release.yml

@@ -0,0 +1,24 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  release:
+    permissions:
+      contents: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+
+      - run: npx changelogithub
+        env:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.gitignore

@@ -19,3 +19,13 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "bracketSameLine": true,
+  "printWidth": 100,
+  "proseWrap": "always",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false
+}

README.md

@@ -1,8 +1,20 @@
 # React Scrollama 🦙
 
 <p align="left">
-  <a href="https://www.npmjs.com/package/react-scrollama">
-    <img src="https://img.shields.io/npm/v/react-scrollama.svg" alt="npm version"/>
+  <a href="https://npmjs.com/package/react-scrollama">
+    <img src="https://img.shields.io/npm/v/react-scrollama?style=flat&colorA=080f12&colorB=1fa669" alt="npm version"/>
+  </a>
+  <a href="https://npmjs.com/package/react-scrollama">
+    <img src="https://img.shields.io/npm/dm/react-scrollama?style=flat&colorA=080f12&colorB=1fa669" alt="npm downloads"/>
+  </a>
+  <a href="https://bundlephobia.com/result?p=react-scrollama">
+    <img src="https://img.shields.io/bundlephobia/minzip/react-scrollama?style=flat&colorA=080f12&colorB=1fa669&label=minzip" alt="package size"/>
+  </a>
+  <a href="https://github.com/jsonkao/react-scrollama/blob/master/LICENSE">
+    <img src="https://img.shields.io/github/license/jsonkao/react-scrollama.svg?style=flat&colorA=080f12&colorB=1fa669" alt="license"/>
+  </a>
+  <a href="https://www.jsdocs.io/package/react-scrollama">
+    <img src="https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669" alt="jsdocs reference"/>
   </a>
 </p>
 
@@ -93,8 +105,8 @@ A `Scrollama` component wraps a set of steps. Each `Step` component [must](https
 A basic example:
 
 ```jsx
-import React, { useState } from 'react';
-import { Scrollama, Step } from 'react-scrollama';
+import React, { useState } from "react";
+import { Scrollama, Step } from "react-scrollama";
 
 const ScrollamaDemo = () => {
   const [currentStepIndex, setCurrentStepIndex] = useState(null);
@@ -106,17 +118,17 @@ const ScrollamaDemo = () => {
   };
 
   return (
-    <div style={{ margin: '50vh 0', border: '2px dashed skyblue' }}>
-      <div style={{ position: 'sticky', top: 0, border: '1px solid orchid' }}>
+    <div style={{ margin: "50vh 0", border: "2px dashed skyblue" }}>
+      <div style={{ position: "sticky", top: 0, border: "1px solid orchid" }}>
         I'm sticky. The current triggered step index is: {currentStepIndex}
       </div>
       <Scrollama offset={0.5} onStepEnter={onStepEnter} debug>
         {[1, 2, 3, 4].map((_, stepIndex) => (
           <Step data={stepIndex} key={stepIndex}>
             <div
               style={{
-                margin: '50vh 0',
-                border: '1px solid gray',
+                margin: "50vh 0",
+                border: "1px solid gray",
                 opacity: currentStepIndex === stepIndex ? 1 : 0.2,
               }}
             >
@@ -140,14 +152,16 @@ React Scrollama components do not render into the DOM. They are meant to set up
 
 These are the props you can set on the `Scrollama` component itself:
 
-| Prop           | Type                                                 | Default | Description                                                                             |
-| -------------- | ---------------------------------------------------- | ------- | --------------------------------------------------------------------------------------- |
-| offset         | `number` (from 0 to 1) or pixel value (e.g. "300px") | 0.3     | How far from the top of the viewport to trigger a step (as a proportion of view height) |
-| threshold      | `number` (greater than 1)                            | 4       | Granularity of the progress interval in pixels (smaller = more granular)                |
-| onStepEnter    | `function`                                           |         | Callback that fires when the top or bottom edge of a step enters the offset threshold.  |
-| onStepExit     | `function`                                           |         | Callback that fires when the top or bottom edge of a step exits the offset threshold.   |
-| onStepProgress | `function`                                           |         | Callback that fires the progress a step has made through the threshold.                 |
-| debug          | `boolean`                                            | false   | Whether to show visual debugging tools.                                                 |
+| Prop           | Type                                                 | Default    | Description                                                                             |
+| -------------- | ---------------------------------------------------- | ---------- | --------------------------------------------------------------------------------------- |
+| offset         | `number` (from 0 to 1) or pixel value (e.g. "300px") | 0.3        | How far from the top of the viewport to trigger a step (as a proportion of view height) |
+| threshold      | `number` (greater than 1)                            | 4          | Granularity of the progress interval in pixels (smaller = more granular)                |
+| onStepEnter    | `function`                                           |            | Callback that fires when the top or bottom edge of a step enters the offset threshold.  |
+| onStepExit     | `function`                                           |            | Callback that fires when the top or bottom edge of a step exits the offset threshold.   |
+| onStepProgress | `function`                                           |            | Callback that fires the progress a step has made through the threshold.                 |
+| debug          | `boolean`                                            | false      | Whether to show visual debugging tools.                                                 |
+| rootRef        | `React.RefObject<Element>`                           | undefined  | The root element of the IntersectionObserver.                                           |
+| direction      | `vertical \| horizontal`                             | horizontal | The direction of the trigger line.                                                      |
 
 The `onStepEnter` and `onStepExit` callbacks receive one argument, an object, with the following properties:
 
@@ -180,9 +194,9 @@ A `Step` element can contain one child, which must be a DOM element. To use a Re
 
 These are the props you can set on the `Step` component:
 
-| Prop | Type | Default | Description                                                      |
-| ---- | ---- | ------- | ---------------------------------------------------------------- |
-| data | any  |         | Data to be given to `<Scrollama>` callbacks when step triggered. |
+| Prop | Type    | Default | Description                                                      |
+| ---- | ------- | ------- | ---------------------------------------------------------------- |
+| data | unknown |         | Data to be given to `<Scrollama>` callbacks when step triggered. |
 
 You will also probably want to set a `key` prop on each `Step` if you're transforming an array of data into a list of `Step` elements (see [Lists and Keys](https://reactjs.org/docs/lists-and-keys.html)).
 

example/public/index.html → example/index.html

@@ -2,35 +2,26 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <meta name="theme-color" content="#000000" />
 
     <meta
       name="description"
-      content="React Scrollama is a lightweight interface for scrollytelling that uses the IntersectionObserver in favor of scroll events."
-    />
+      content="React Scrollama is a lightweight interface for scrollytelling that uses the IntersectionObserver in favor of scroll events." />
 
     <meta
       name="twitter:card"
-      value="React Scrollama is a lightweight interface for scrollytelling that uses the IntersectionObserver in favor of scroll events."
-    />
+      value="React Scrollama is a lightweight interface for scrollytelling that uses the IntersectionObserver in favor of scroll events." />
     <!-- Open Graph data -->
     <meta property="og:title" content="React Scrollama" />
     <meta property="og:type" content="website" />
-    <meta
-      property="og:url"
-      content="http://jsonkao.github.io/react-scrollama"
-    />
+    <meta property="og:url" content="http://jsonkao.github.io/react-scrollama" />
     <meta property="og:image" content="https://i.imgur.com/PrAESdH.png" />
     <meta
       property="og:description"
-      content="React Scrollama is a lightweight interface for scrollytelling that uses the IntersectionObserver in favor of scroll events."
-    />
+      content="React Scrollama is a lightweight interface for scrollytelling that uses the IntersectionObserver in favor of scroll events." />
 
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
 
     <title>React Scrollama: Scrollytelling for React</title>
 
@@ -59,5 +50,6 @@
     <noscript> You need to enable JavaScript to run this app. </noscript>
 
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

example/package.json

@@ -4,30 +4,24 @@
   "version": "0.0.0",
   "private": true,
   "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
   "dependencies": {
-    "prop-types": "^15.8.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-jss": "^10.10.0",
-    "react-scripts": "^5.0.1",
     "react-scrollama": "file:../"
   },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "devDependencies": {
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.0"
   }
 }