DEV Community

Cover image for Introducing React URL Modal
Cassidy Williams for Remote

Posted on • Originally published at remote.com on

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:

> npm i react-url-modal

# or

> yarn add react-url-modal
Enter fullscreen mode Exit fullscreen mode

(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:

import { URLModal } from "react-url-modal";

import { ExampleModalComponent, SomeOtherExampleModalComponent } from './Modals';

export const App = () => (
  <URLModal
    modals={{
      exampleModal: ExampleModalComponent ,
      otherModal: SomeOtherExampleModalComponent ,
    }}
  />
);
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)