Introducing React URL Modal

Here at Remote, we have a shiny new GitHub organization where we’ll be open sourcing packages and libraries we’ve built for the world to see (and hopefully benefit from)! And — our first ever npm package is officially live!

React URL Modal is a React library to help you keep track of your modal state using the URL. More specifically, it:

• Lets your modals in your applications have URLs

• Encodes all the parameters sent to a modal

• Supports React Portals

• Works with any framework (as it uses the History API)

It’s headless, minimal, and ready to use now!

How do I use the React URL Modal?

You can install the library into your existing React projects via npm or yarn:

1> npm i react-url-modal
2
3# or
4
5> yarn add react-url-modal

(Or, you can manually install it locally from GitHub.)

From there, you can drop in the library wherever you’d like. Here’s an example of what that can look like:

1import { URLModal } from "react-url-modal";
2
3import { ExampleModalComponent, SomeOtherExampleModalComponent } from './Modals';
4
5export const App = () => (
6  <URLModal
7    modals={{
8      exampleModal: ExampleModalComponent ,
9      otherModal: SomeOtherExampleModalComponent ,
10    }}
11  />
12);
13

Where do I go from here?

We’ve got some more examples and API documentation for you to get started! We'd also love to hear about your bugs, feature requests, and use cases in the repository. See you there!