joppot

コピペで絶対動く。説明を妥協しない

プログラミング

Tutorial to create a modal using react-modal

投稿日:2018年11月12日 更新日:


Abstract

Hello everyone it’s me candle. In this time, let’s create a modal with react-modal.

React-modal is a library which can create and handle a modal easily.
But

However, react-modal is not easy if you try to actually use it. it is necessary to incorporate state management, action, design etc.

In this article, I will explain it like a tutorial and we will make a modal together.

Condition

  1. You have a react knowledge.
  2. You installed create-react-app.

Set up development env

If you already have a some react project, you would use it.
Otherwise, you don’t have a any project, please create a new project with this command.

create-react-app rmodal
cd rmodal

Install Faker

Faker is necessary for explanation, so it is not absolutely necessary.
We installed it to generate dummy data of state using Faker.js.

yarn add --dev faker

Edit the App.js

We will make a container using faker. Open src/App.js and edit like this.

import React, { Component } from 'react'
import Faker from 'faker'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      users: [],
      user: {
        products: []
      }
    }
  }

  componentWillMount() {
    for (let i = 0; i < 10; i++) {
      let products = []

      for (let j = 0; j < 6; j++) {
        const product = {
          name: Faker.commerce.productName(),
          price: Faker.commerce.price(),
          image: Faker.image.food(30, 40),
        }
        products = [...products, product]
      }

      const user = {
        name: Faker.internet.userName(),
        email: Faker.internet.email(),
        avatar: Faker.internet.avatar(),
        products: products,
      }
      this.setState(prevState => ({
        users: [...prevState.users, user],
      }))
    }
  }

  renderUsers(user) {
    return (
      <div style={{ border: 'solid 1px #eee' }}>
        <img src={user.avatar} alt={user.name} width="50" height="50" />
        <h4>Name: {user.name}</h4>
        <h4>Email: {user.email}</h4>
      </div>
    )
  }

  render() {
    return <div>{this.state.users.map(user => this.renderUsers(user))}</div>
  }
}

export default App

I don’t explain a detail, anyway it works fine like the below image.

Our purpose is to display the modal which has these user’s products list when you click the user.

The part is here.

const user = {
  name: Faker.internet.userName(),
  email: Faker.internet.email(),
  avatar: Faker.internet.avatar(),
  products: products,
}

Ok ready to start.

Install react-modal

Execute the command to install react-modal in the terminal.

yarn add react-modal

Import react-modal

First we import react-modal into arbitrary file.
I will write it into src/App.js.

import Modal from 'react-modal'

react-modal’s setAppElement

Next, we will write Modal.setAppElement('#yourAppElement').
This is a setting to clarify the relationship with other contents when a modal is displayed.

If you build the project with create-react-app command, there are doms like this in the public/index.html.

 <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>

You can see id="root". Let’s write it before class App ofsrc / App.js.

Modal.setAppElement('#root')

The state for modal

We will make a state to management whether the modal is open or closed.
Add modalIsOpen: false state to this.state={} of constructor(props).
The modal is closed as a default, so set up false.

 constructor(props) {
    super(props)
    this.state = {
      users: [],
      user: {
        products: []
      },
      modalIsOpen: false
    }
  }

Functions to open and close modal

Next, please write these two functions in the class anywhere you like.

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

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

Create a css json of modal

The react-modal’s modal is defined by json.
The default css code is here. In this time we will use this code without changing.

Let’s write it downward.

const customStyles = {
    overlay: {
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(255, 255, 255, 0.75)'
    },
    content: {
      position: 'absolute',
      top: '40px',
      left: '40px',
      right: '40px',
      bottom: '40px',
      border: '1px solid #ccc',
      background: '#fff',
      overflow: 'auto',
      WebkitOverflowScrolling: 'touch',
      borderRadius: '4px',
      outline: 'none',
      padding: '20px'
    }
  };

Function to display contents when modal is opened

The contents of the modal will display products inuser state.
So we will create a function like this.

  renderProducts(product) {
    return (
      <div style={{ border: 'solid 1px #eee' }}>
        <img src={product.image} alt={product.name} width="50" height="50" />
        <h4>Name: {product.name}</h4>
        <h4>Price: {product.price}</h4>
      </div>
    )
  }

JSX of modal

Let’s make a modal JSX. Write the below code into the render() function.

 render() {
    return (
      <div>
        {this.state.users.map(user => this.renderUsers(user))}
        <Modal
          isOpen={this.state.modalIsOpen}
          onRequestClose={this.closeModal.bind(this)}
          style={customStyles}
          contentLabel="Example Modal"
        >
          <h2>
            {this.state.user.name}
            の制作物
          </h2>
          <button onClick={this.closeModal.bind(this)}>Close</button>
          {this.state.user.products.map(product => this.renderProducts(product))}
        </Modal>
      </div>
    )
  }

Display modal

We edit the function so that it displays the modal when you click a user. Change the openModal() function.

  openModal(user) {
    this.setState({
      user: user,
      modalIsOpen: true,
    })
  }

Edit the renderUsers(user) function. This DOM calls the openModal function with onClick.

  renderUsers(user) {
    return (
      <div style={{ border: 'solid 1px #eee' }} onClick={this.openModal.bind(this, user)}>
        <img src={user.avatar} alt={user.name} width="50" height="50" />
        <h4>Name: {user.name}</h4>
        <h4>Email: {user.email}</h4>
      </div>
    )
  }

This is completed. Let’s run it.

Check the modal

Start the server.

yarn run start

Check it on the browser.

To close a modal, you can click outside the modal or click the close button.

It went well.

The whole of code

I write all the code I explained at the end.

import React, { Component } from 'react'
import Faker from 'faker'
import Modal from 'react-modal'

Modal.setAppElement('#root')

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      users: [],
      user: {
        products: [],
      },
      modalIsOpen: false,
    }
  }

  componentWillMount() {
    for (let i = 0; i < 10; i++) {
      let products = []

      for (let j = 0; j < 6; j++) {
        const product = {
          name: Faker.commerce.productName(),
          price: Faker.commerce.price(),
          image: Faker.image.food(30, 40),
        }
        products = [...products, product]
      }

      const user = {
        name: Faker.internet.userName(),
        email: Faker.internet.email(),
        avatar: Faker.internet.avatar(),
        products: products,
      }
      this.setState(prevState => ({
        users: [...prevState.users, user],
      }))
    }
  }

  openModal(user) {
    this.setState({
      user: user,
      modalIsOpen: true,
    })
  }

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

  renderProducts(product) {
    return (
      <div style={{ border: 'solid 1px #eee' }}>
        <img src={product.image} alt={product.name} width="50" height="50" />
        <h4>Name: {product.name}</h4>
        <h4>Price: {product.price}</h4>
      </div>
    )
  }

  renderUsers(user) {
    return (
      <div style={{ border: 'solid 1px #eee' }} onClick={this.openModal.bind(this, user)}>
        <img src={user.avatar} alt={user.name} width="50" height="50" />
        <h4>Name: {user.name}</h4>
        <h4>Email: {user.email}</h4>
      </div>
    )
  }

  render() {
    return (
      <div>
        {this.state.users.map(user => this.renderUsers(user))}
        <Modal
          isOpen={this.state.modalIsOpen}
          onRequestClose={this.closeModal.bind(this)}
          style={customStyles}
          contentLabel="Example Modal"
        >
          <h2>
            {this.state.user.name}
            の制作物
          </h2>
          <button onClick={this.closeModal.bind(this)}>Close</button>
          {this.state.user.products.map(product => this.renderProducts(product))}
        </Modal>
      </div>
    )
  }
}

const customStyles = {
  overlay: {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(255, 255, 255, 0.75)',
  },
  content: {
    position: 'absolute',
    top: '40px',
    left: '40px',
    right: '40px',
    bottom: '40px',
    border: '1px solid #ccc',
    background: '#fff',
    overflow: 'auto',
    WebkitOverflowScrolling: 'touch',
    borderRadius: '4px',
    outline: 'none',
    padding: '20px',
  },
}

export default App

Conclusion

In this article I have explained the basic usage of react-modal.

You scroll in the modal and when you come to the bottom, the background page can also scroll. Also, even if you scroll outside the modal, the background page scrolls the same way. Sometime this is inconvenient, so I’d like to explain how to fix it next time.

Please adjust the design and use it.

スポンサードリンク

If you think this article is good, share it please

-プログラミング
-, , ,

執筆者:


comment

Your email address will not be published. Required fields are marked *

関連記事

React creates dummy data using Faker.js

Abstract Hello everyone it’s me candle. Let’s try to use Faker.js in React. I think that there are various purposes for using Faker.js. In many cases you will use it for testing, but this time I’d like to create a dummy react state using Faker.js. Condition You have a basic react skill create-react-app was installed Create new project First of all, create a react project. Execute the below command in your favorite directory and create a new react project. create-react-app faker-demo cd faker-demo Installation of faker Install faker with this coommand. yarn add –dev faker it’s over. Generate dummy data …

React Project development environment building command create-react-app is too convenient

English 日本語 Abstract Hello everyone It’s me candle. In this time we will build a “react” development environment with create-react-app command and try to hello world. Past react development was created by installing babel and other packages from npm on your own using gulp or webpack. Past react development installed babel and other packages from npm and built servers with gulp and webpack. If you use the create-react-app command, you can create react environment easily. Let’s do it. Precondition Node is already installed

Lazy load image with react-lazyload

Abstract Hello everyoen it’s me candle. This time let’s make a delayed loading of images with react-lazyload. The problem of SPA is the delay at the time of initial loading. Among them, we feel that the site with many images is even late. Let’s try it. Condition Nothing Prepare If you have already developing react project, use it. But you don’t have yet or try to test. Generate it with this command. create-react-app imageloader-sample cd imageloader-sample We will prepare images for samples with Faker.js, so install it. yarn add faker Ready to develop. Make a sample code Open the src/App.js …

Tutorial How to use GSAP animation with React

Abstract Hello everyone it’s me candle. In this time we will use GSAP in React. The famous js library which can easily use animation is jQuery. However, it seems that compatibility between jQuery and React is bad. And there are no functions Also, as far as I know, React has no animation function that is easy to use(Yeah, Transition is). But, all times and places, it is rare case that animation is not necessary when you have created a web service. There are many candidates when using animation with React. Of course, you can import only the necessary functions and use …

Using sphinx how to generate documents of python classes and functions

Abstruct Hello everyone it’s me candle. In this article I will explain how to make documents about classes and functions with Sphinx automatically. condition I will explain it using Python 3, but I think that it will probably work with python 2 as well. Prepare test files Create a main.py and dog.py. touch main.py dog.py Write this to the main.py from dog import Dog def main(): dog = Dog() dog.show_name() if __name__ == "__main__": main() Open the dog.py and write it. class Dog(object): def __init__(self, name="bob"): self.name = name def bark(): print("Bow Wow") def show_name(self): print(self.name) def get_name(self): return self.name …


I work in the venture company as a CTO. I start to write program in University, first I learned java, C++ and PHP. In the company, I'm developing web services by Rails. I do like to automation.