DEV Community

Cover image for Introducing React URL Modal
Cassidy Williams for Remote

Posted on • Originally published at remote.com on

6 1

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!

Neon image

Build better on Postgres with AI-Assisted Development Practices

Compare top AI coding tools like Cursor and Windsurf with Neon's database integration. Generate synthetic data and manage databases with natural language.

Read more →

Top comments (0)

Jetbrains image

Build Secure, Ship Fast

Discover best practices to secure CI/CD without slowing down your pipeline.

Read more

👋 Kindness is contagious

Value this insightful article and join the thriving DEV Community. Developers of every skill level are encouraged to contribute and expand our collective knowledge.

A simple “thank you” can uplift someone’s spirits. Leave your appreciation in the comments!

On DEV, exchanging expertise lightens our path and reinforces our bonds. Enjoyed the read? A quick note of thanks to the author means a lot.

Okay