How to set responsive style to react modal in React js?

Question

I am trying to set styles to my modal for be resposive in different media. In react js, I have used customStyle to

import Modal from 'react-modal';

const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : 'auto',
    bottom                : 'auto',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)'
  }
};

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      modalIsOpen: false
    };

    this.openModal = this.openModal.bind(this);
    this.afterOpenModal = this.afterOpenModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  openModal() {
    this.setState({modalIsOpen: true});
  }

  afterOpenModal() {
    // references are now sync'd and can be accessed.
    this.subtitle.style.color = '#f00';
  }

  closeModal() {
    this.setState({modalIsOpen: false});
  }

  render() {
    return (
      <div>
        <button onClick={this.openModal}>Open Modal</button>
        <Modal
          isOpen={this.state.modalIsOpen}
          onAfterOpen={this.afterOpenModal}
          onRequestClose={this.closeModal}
          style={customStyles}
          contentLabel="Example Modal"
        >

          <h2 ref={subtitle => this.subtitle = subtitle}>Hello</h2>
          <button onClick={this.closeModal}>close</button>
          <div>I am a modal</div>
        </Modal>
      </div>
    );
  }
}

How i add more style feature to get resposive modal, thanks. How to add @media style to react-modal in my code. Please help me. Thanks alot.

So one of the big things about react is the abstraction. These media queries would be applied via a stylesheet outside of the component — Sterling Archer
– Sterling Archer, Commented Apr 6, 2018 at 0:48
Possible duplicate of Inline CSS styles in React: how to implement media queries? — Mitch Lillie
– Mitch Lillie, Commented Apr 6, 2018 at 0:48

Hp Lam · Accepted Answer · 2018-04-06 04:38:13Z

1

You can try use className and add the css for it.

<ReactModal 
       isOpen={this.state.showModal}
       contentLabel="onRequestClose Example"
       onRequestClose={this.handleCloseModal}
       className="YouClass"
       overlayClassName="Overlay"
    >
      <p>Modal text!</p>
      <button onClick={this.handleCloseModal}>Close Modal</button>
    </ReactModal>

Please read more: https://codepen.io/claydiffrient/pen/KNjVrG

answered Apr 6, 2018 at 4:38

Hp Lam

3571 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mahmonir Bakhtiyari Over a year ago

Thanks for your guide! But I want to style in .js file.

Hp Lam Over a year ago

@mahmonir-bakhtiyari you can get the width of the element and set responsive, for example:

if (this.state.viewport.width > 900) {     customStyles.content = {width: '45%', margin: '2.5%',....}; } else {      customStyles.conten = {width: '100%', margin: '0', ....}; }

stackoverflow.com/a/28415346/5474196

Eric Azimi Over a year ago

That was very helpful thanks. The documentation is not perfect!

thinhvo0108 · Accepted Answer · 2018-04-06 03:44:46Z

0

You can just add class/ID to your Modal and/or its child DOM, then use a normal CSS file, with @media declaration, and style your component responsively as you wish!

You can simply include that normal CSS file in your main index.html file.

answered Apr 6, 2018 at 3:44

thinhvo0108

2,2301 gold badge16 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to set responsive style to react modal in React js?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related