https://github.com/candidia/react-router-busy
A simple and performant react-router/remix package for accessible form input, button, and link loading states.
https://github.com/candidia/react-router-busy
react react-router reactjs remix remix-run
Last synced: 4 months ago
JSON representation
A simple and performant react-router/remix package for accessible form input, button, and link loading states.
- Host: GitHub
- URL: https://github.com/candidia/react-router-busy
- Owner: candidia
- Created: 2024-09-18T22:01:11.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-02T22:21:20.000Z (over 1 year ago)
- Last Synced: 2026-01-12T09:53:58.481Z (5 months ago)
- Topics: react, react-router, reactjs, remix, remix-run
- Language: TypeScript
- Homepage: https://stackblitz.com/edit/remix-run-remix-obreke
- Size: 2.36 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: .github/README.md
Awesome Lists containing this project
README
# react-router-busy
[](https://bundlephobia.com/package/react-router-busy)
[](https://www.npmjs.com/package/react-router-busy)
[](https://www.npmjs.com/package/react-router-busy)
Improve your app's UX with just an import. A simple and performant package for accessible form input, button, and link **loading states**.
For use with [react-router](https://github.com/remix-run/react-router) 6+ or [remix](https://github.com/remix-run/remix) 2+.
> [!IMPORTANT]
> [Vite currently throws an error when trying to import the CSS module](https://github.com/vitejs/vite/issues/9487) this library uses to change the cursor, so please add the following to your vite.config for now, which will be fixed in the future:
> ```
> ssr: {
> noExternal: ['react-router-busy'],
> },
> ```
## The problem
## The solution
If you'd like to see an example, check it out live on https://gitsell.dev. Also see react-router-busy/src/busy.module.css for an example of what to target to style the various busy states.
### BusyForm
Render `BusyForm` instead of `Form` or `fetcher.Form`:
* All the form's inputs will become `readonly` during submission to prevent someone from changing input data during submission and causing themselves confusion. The `cursor` will be `wait` if hovering over an input.
* The form's submit button will become `aria-busy="true"` during submission to prevent double-clicking and causing extraneous requests. The `cursor` will be `wait` if hovering over the button, and `pointer-events` will be `none` to actually prevent clicking.
This library doesn't make inputs `disabled` because it causes the field to not be sent in the form data and it's not accessibility friendly to dynamically toggle.
#### With navigation
```tsx
import { BusyForm } from 'react-router-busy';
...
return (
{...inputs}
Submit
)
```
#### With fetcher
```tsx
import { BusyForm } from 'react-router-busy';
...
const fetcher = useFetcher({ key: "key" });
return (
{...inputs}
Submit
)
```
### BusyLink
This library assumes all your buttons are in forms. But links are another story, so `BusyLink` is a replacement for `Link` to add this functionality for URLs to your app.
```tsx
import { BusyLink } from 'react-router-busy';
...
return (
Link
)
```
## To do
- Fix CSS module import error "TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for node_modules/react-router-busy/build/busy.module.css"
- Fix a keyboard user still being able re-press the button
- NavLink, Better not to have all that extra code for the `as` prop
- Also export as Form and Link in case consumers prefer not replacing name
- Make an option where you can edit the inputs after submission which cancels the current submission