---
title: "React Popup Responsive Example | Mobiscroll"
component: "Popup"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/popup/responsive"
---

# Responsive - React Popup demo

Responsive React popup component. Change display modes and how the component renders across different screen sizes. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/popup/responsive)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/pickers/popup/responsive)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/pickers/popup/responsive)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/popup/responsive.md), [jQuery](https://demo.mobiscroll.com/jquery/popup/responsive.md), [Angular](https://demo.mobiscroll.com/angular/popup/responsive.md), [Vue](https://demo.mobiscroll.com/vue/popup/responsive.md)

## Description

The popup component adapts fluidly to its environment. There are times however when you would like to set the component up responsively.

Use the [`responsive` option](https://mobiscroll.com/docs/react/select/api#opt-responsive) to configure the popup and change the options based on the viewport width. There are five predefined breakpoints:

- `xsmall` - min-width: 0px
- `small` - min-width: 576px
- `medium` - min-width: 768px
- `large` - min-width: 992px
- `xlarge` - min-width: 1200px
- use `custom` for setting a custom `breakpoint`

It is a good idea to adjust the `display` to tailor the UX. This allows you to have the popup **bottom-positioned on mobile devices**, **centered on tablets**, and **anchored to input on larger screens** to enhance the user experience.

## What this demo shows

- A responsive popup that uses different display modes across touch and desktop layouts.
- **Viewport switcher** A segmented control above the popup switches between viewport presets.
- **Small screen layout** At the `375px` viewport preset, the popup opens at the bottom of the screen.
- **Medium screen layout** At the `576px` and `768px` viewport presets, the popup opens as a centered modal.
- **Large screen layout** At the `992px` and `1200px` viewport presets, the popup opens as a popover anchored to the button.
- **Popup layout** The popup uses a custom layout for its content.
- **Custom content** The popup contains a custom image or logo, a heading, and descriptive text.
- **Visual separation** A modal overlay and shadow separate the popup from the underlying content.

## Best for

- **Cross-device workflows** Presenting the same popup content in layouts suited to phones, tablets, and desktop screens.
- **Touch-friendly interactions** Positioning popups at the bottom of small screens for easier access on touch devices.
- **Focused tablet experiences** Displaying popup content in a centered modal at medium viewport widths.
- **Contextual desktop actions** Anchoring a popover to its trigger on larger screens so the popup stays visually connected to the action that opened it.
- **Responsive applications** Changing popup display options at predefined or custom breakpoints without maintaining separate implementations for each screen size.

## Tutorial

```jsx
<Popup
  responsive={{
    xsmall: {
      display: 'bottom',
    },
    small: {
      display: 'center',
    },
    custom: { // Custom breakpoint
      breakpoint: 800,
      display: 'anchored',
    }
  }}
/>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/react/popup/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/popup/api#opt-themeVariant) - option
- [`responsive`](https://mobiscroll.com/docs/react/popup/api#opt-responsive) - option
- [`display`](https://mobiscroll.com/docs/react/popup/api#opt-display) - option
- [`anchor`](https://mobiscroll.com/docs/react/popup/api#opt-anchor) - option
- [`isOpen`](https://mobiscroll.com/docs/react/popup/api#opt-isOpen) - option
- [`onClose`](https://mobiscroll.com/docs/react/popup/api#event-onClose) - event

## Code

### JSX

```jsx
import { Button, Page, Popup, setOptions } from '@mobiscroll/react';
import { useCallback, useRef, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {
  const [isPopupOpen, setPopupOpen] = useState(false);
  const [myAnchor, setAnchor] = useState();
  const buttonRef = useRef(null);

  const openPopup = useCallback(() => {
    setAnchor(buttonRef.current.nativeElement);
    setPopupOpen(true);
  }, []);

  return (
    <Page>
      <div className="mbsc-form-group">
        <div className="mbsc-button-group-block">
          <Button ref={buttonRef} onClick={openPopup}>
            Open popup
          </Button>
        </div>
      </div>
      <Popup
        responsive={{
          xsmall: {
            display: 'bottom',
          },
          small: {
            display: 'center',
          },
          custom: {
            // Custom breakpoint
            breakpoint: 800,
            display: 'anchored',
            anchor: myAnchor,
          },
        }}
        isOpen={isPopupOpen}
        onClose={() => setPopupOpen(false)}
      >
        <div className="mbsc-align-center mbsc-padding">
          <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" alt="logo" />
          <h4>Welcome to our website!</h4>
          <p>Have fun navigating through the demos.</p>
        </div>
      </Popup>
    </Page>
  );
}

export default App;
```

### TSX

```tsx
import { Button, Page, Popup, setOptions } from '@mobiscroll/react';
import { useCallback, useRef, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {
  const [isPopupOpen, setPopupOpen] = useState<boolean>(false);
  const [myAnchor, setAnchor] = useState<HTMLElement>();
  const buttonRef = useRef<Button>(null);

  const openPopup = useCallback(() => {
    setAnchor(buttonRef.current!.nativeElement);
    setPopupOpen(true);
  }, []);

  return (
    <Page>
      <div className="mbsc-form-group">
        <div className="mbsc-button-group-block">
          <Button ref={buttonRef} onClick={openPopup}>
            Open popup
          </Button>
        </div>
      </div>
      <Popup
        responsive={{
          xsmall: {
            display: 'bottom',
          },
          small: {
            display: 'center',
          },
          custom: {
            // Custom breakpoint
            breakpoint: 800,
            display: 'anchored',
            anchor: myAnchor,
          },
        }}
        isOpen={isPopupOpen}
        onClose={() => setPopupOpen(false)}
      >
        <div className="mbsc-align-center mbsc-padding">
          <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" alt="logo" />
          <h4>Welcome to our website!</h4>
          <p>Have fun navigating through the demos.</p>
        </div>
      </Popup>
    </Page>
  );
}

export default App;
```

### CSS

```css
/* style */
```

## Implementation notes

- `responsive` is an object keyed by breakpoint name, each value an object of popup options (`display`, `anchor`, etc.) applied once the viewport reaches that breakpoint's minimum width.
- Predefined breakpoint keys and their `min-width` thresholds: `xsmall` (0px), `small` (576px), `medium` (768px), `large` (992px), `xlarge` (1200px). The matching options apply from that width up to the next defined breakpoint.
- A `custom` key defines an arbitrary breakpoint via a `breakpoint` (pixel width) property alongside the options to apply at that width, e.g. `custom: { breakpoint: 800, display: 'anchored' }` - `custom` can be combined with the predefined keys in the same `responsive` object.
- In this demo: `xsmall: { display: 'bottom' }` (mobile - popup slides up from the bottom), `small: { display: 'center' }` (tablet - centered modal), and `custom: { breakpoint: 800, display: 'anchored' }` (wider desktop - popup anchors to the trigger button).
- When the active breakpoint sets `display: 'anchored'`, an `anchor` must also be supplied (either inside that breakpoint's options or as a top-level option) so the popup has an element to position against.
- Options set via `responsive` override the popup's top-level options once their breakpoint is active; options not overridden at a given breakpoint fall back to the top-level (or default) value.
- Framework binding: JS/jQuery pass `responsive` inside `.popup({ responsive: {...} })`; React passes it as a `responsive` prop object on `<Popup>`; Vue defines the object in the `<script setup>` block and binds it with `:responsive="myResp"`; Angular sets it as a property on the component's `MbscPopupOptions` object bound via `[options]`.
- Resizing the viewport re-evaluates `responsive` live - no manual `.setOptions()` call or popup reopen is needed for the breakpoint options to take effect.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-react.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config react
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config react --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/react/getting-started/installation

## Related demos

- Previous: [Configure buttons](https://demo.mobiscroll.com/react/popup/button-configuration.md) - React popup component with different button configurations. Use it with or without buttons. Add custom actions.