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!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)