React 19 + other upgrades

CHANGELOG.md

@@ -0,0 +1,16 @@
+# Changelog
+
+This file includes all notable changes made to this project (since `v2.4.0`. Before that unfortunately there was not a record maintained)
+
+The format of this file is from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this
+project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [2.4.0]
+
+### Added
+
+- This changelog file (#107)
+
+### Changed
+
+- Upgrade to React 19 (#107)

README.md

@@ -9,6 +9,7 @@
 React Scrollama is a simple and silky library for scrollytelling. It relies on IntersectionObserver and sticky positioning over scroll listeners. It is originally adapted from [Russel Samora's](https://russellsamora.github.io/) [Scrollama](https://github.com/russellgoldenberg/scrollama).
 
 A few examples of ambitious interactive stories that were built with React Scrollama…
+
 <table>
 <tbody>
 <tr>
@@ -67,6 +68,7 @@ A live demo [lives here](https://jsonkao.github.io/react-scrollama). It was debu
 ## Install
 
 React Scrollama can be installed as an [npm package](https://www.npmjs.com/package/react-scrollama):
+
 ```
 $ npm install react-scrollama
 ```
@@ -138,14 +140,14 @@ 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.                                                 |
 
 The `onStepEnter` and `onStepExit` callbacks receive one argument, an object, with the following properties:
 
@@ -179,36 +181,36 @@ 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. |
 
 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)).
 
 ## Thank you to everyone who made this possible!
 
-* [jsonkao](https://github.com/jsonkao)
-* [maerzhase](https://github.com/maerzhase)
-* [NicholasLYang](https://github.com/NicholasLYang)
-* [jonesbp](https://github.com/jonesbp)
-* [kennethormandy](https://github.com/kennethormandy)
-* [cedricdelpoux](https://github.com/cedricdelpoux)
-* [davidnmora](https://github.com/davidnmora)
-* [jefffriesen](https://github.com/jefffriesen)
-* [paolocorti](https://github.com/paolocorti)
-* [elbertwang3](https://github.com/elbertwang3)
-* [michaelgrotton](https://github.com/michaelgrotton)
-* [jjrchrds](https://github.com/jjrchrds)
-* [goleary](https://github.com/goleary)
-* [danieleguido](https://github.com/danieleguido)
-* [Lane](https://github.com/Lane)
-* [jkjustjoshing](https://github.com/jkjustjoshing)
-* [tuckergordon](https://github.com/tuckergordon)
-* [fschwander](https://github.com/fschwander)
-* [thisispaul](https://github.com/thisispaul)
+- [jsonkao](https://github.com/jsonkao)
+- [maerzhase](https://github.com/maerzhase)
+- [NicholasLYang](https://github.com/NicholasLYang)
+- [jonesbp](https://github.com/jonesbp)
+- [kennethormandy](https://github.com/kennethormandy)
+- [cedricdelpoux](https://github.com/cedricdelpoux)
+- [davidnmora](https://github.com/davidnmora)
+- [jefffriesen](https://github.com/jefffriesen)
+- [paolocorti](https://github.com/paolocorti)
+- [elbertwang3](https://github.com/elbertwang3)
+- [michaelgrotton](https://github.com/michaelgrotton)
+- [jjrchrds](https://github.com/jjrchrds)
+- [goleary](https://github.com/goleary)
+- [danieleguido](https://github.com/danieleguido)
+- [Lane](https://github.com/Lane)
+- [jkjustjoshing](https://github.com/jkjustjoshing)
+- [tuckergordon](https://github.com/tuckergordon)
+- [fschwander](https://github.com/fschwander)
+- [thisispaul](https://github.com/thisispaul)
 
 ## Features roadmap
 
-* Currently, there is no way to throttle/customize React Scrollama's [resize listener](https://github.com/jsonkao/react-scrollama/blob/master/src/Scrollama.js#L104) 😢. We're working on this in [#44](https://github.com/jsonkao/react-scrollama/issues/44).
-* Fire previous step triggers if they were jumped
+- Currently, there is no way to throttle/customize React Scrollama's [resize listener](https://github.com/jsonkao/react-scrollama/blob/master/src/Scrollama.js#L104) 😢. We're working on this in [#44](https://github.com/jsonkao/react-scrollama/issues/44).
+- Fire previous step triggers if they were jumped
 
 Lmk if you need these features ASAP.

eslint.config.mjs

@@ -0,0 +1,57 @@
+import globals from 'globals';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import reactPlugin from 'eslint-plugin-react';
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+import pluginJs from '@eslint/js';
+import { includeIgnoreFile } from '@eslint/compat';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const gitignorePath = path.resolve(__dirname, '.gitignore');
+
+export default [
+  pluginJs.configs.recommended,
+  reactPlugin.configs.flat.recommended,
+  reactPlugin.configs.flat['jsx-runtime'],
+  jsxA11y.flatConfigs.recommended,
+  includeIgnoreFile(gitignorePath),
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+      },
+      sourceType: 'module',
+    },
+
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+
+    rules: {
+      'import/no-named-as-default': 0,
+      'import/no-named-as-default-member': 0,
+      'import/first': 0,
+
+      'react/prop-types': [
+        2,
+        {
+          skipUndeclared: true,
+        },
+      ],
+
+      'arrow-parens': [2, 'as-needed'],
+
+      'jsx-a11y/anchor-is-valid': [
+        'error',
+        {
+          components: ['Link'],
+          specialLink: ['to'],
+          aspects: ['noHref', 'invalidHref', 'preferButton'],
+        },
+      ],
+    },
+  },
+];