使用reactjs-popup创建React Modal

如今，模态是React应用程序中最常用的组件之一，通过一种简单的方法来创建React Modals将帮助您在即将到来的React应用程序中快速了解与Modals相关的功能。

在本教程中，我们将仅使用22行代码构建一个简单的React Modal。

下面的gif可以帮助您了解我们正在尝试构建的内容

开始吧

创建React项目

首先，使用create-react-app CLI创建一个简单的react项目。

$ npx Create-react-app SimpleModal

import React from "react" ;
import ReactDOM from "react-dom" ;

import "./styles.css" ;

function App ( )  {
  return (
    < div className = "App" >
       <h1>Create React Modal in X line of code </h1>
      <button>Click Me</button> 
    </ div >
  );
}

const rootElement = document .getElementById( "root" );
ReactDOM.render( < App /> , rootElement);

在本教程中，我们将使用react-popup软件包，它是一个简单而强大的react组件，具有很多优点：

• 模态，工具提示，菜单：多合一🏋️

• 全样式定制👌

• 用作子模式，以控制代码中任何位置的弹出窗口。 💪

• IE支持。 🚀

• TypeScript支持👌

• 所有这些时钟的压缩时间约为3 kB。 ⚡️

该软件包可在npm存储库中以reactjs-popup的形式获得。 它将与所有流行的捆包机一起正常工作。

$ yarn add reactjs-popup

创建反应模态

从reactjs-popup导入Popup Component并开始使用它，如下所示。

将trigger属性添加为简单的React Button元素，并将modal属性设置为true。

import React from "react" ;
import ReactDOM from "react-dom" ;
import Popup from "reactjs-popup" ;

import "./styles.css" ;

function App ( )  {
  return (
    < div className = "App" >
       <h1>Create React Modal with 22 line of code </h1>
      <Popup modal trigger={<button>Click Me</button>}>
        Modal Content
      </Popup> 
    </ div >
  );
}

const rootElement = document .getElementById( "root" );
ReactDOM.render( < App /> , rootElement);

定制和样式化React模式

我们需要为Modal Content组件创建一个Content.js文件，并添加一些样式

//content.js
import React from "react" ;

export default ({ close }) => (
  < div className = "modal" >
     <a className="close" onClick={close}>
      &times;
    </a>
    <div className="header"> Modal Title </div>
    <div className="content">
      {" "}
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, a nostrum.
      Dolorem, repellat quidem ut, minima sint vel eveniet quibusdam voluptates
      delectus doloremque, explicabo tempore dicta adipisci fugit amet
      dignissimos?
      <br />
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit
      commodi beatae optio voluptatum sed eius cumque, delectus saepe
      repudiandae explicabo nemo nam libero ad, doloribus, voluptas rem alias.
      Vitae?
    </div> 
  </ div >
);

/* index.css */ 
.modal {
  font-size : 12px ;
}
.modal > .header {
  width : 100% ;
  border-bottom : 1px solid gray;
  font-size : 18px ;
  text-align : center;
  padding : 5px ;
}
.modal > .content {
  width : 100% ;
  padding : 10px 5px ;
}
.modal > .actions {
  margin : auto;
}
.modal > .actions {
  width : 100% ;
  padding : 10px 5px ;
  text-align : center;
}
.modal > .close {
  cursor : pointer;
  position : absolute;
  display : block;
  padding : 2px 5px ;
  line-height : 20px ;
  right : - 10px ;
  top : - 10px ;
  font-size : 24px ;
  background : #ffffff ;
  border-radius : 18px ;
  border : 1px solid #cfcece ;
}

现在是时候进行一些魔术了

由于reactjs-popup将子级作为函数模式提供，因此您可以完全控制Popup状态

我们将更新示例，以使用函数作为子函数而不是react元素来实现“关闭”按钮。

//index.js
import React from "react" ;
import ReactDOM from "react-dom" ;
import Popup from "reactjs-popup" ;

import Content from "./Content.js" ;
import "./styles.css" ;

function App ( )  {
  return (
    < div className = "App" >
       <h1>Create React Modal with 22 line of code </h1>
      <Popup modal trigger={<button>Click Me</button>}>
        {close => <Content close={close} />}
      </Popup>
    </div> 
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render( <App /> , rootElement);

最后结果

reactjs-popup： https ://react-popup.elazizi.com/

回购： https : //github.com/yjose/create-react-modal-with-22-line-of-code

Codesandbox： https ://codesandbox.io/s/create-react-modal-with-22-lines-of-code-v2u7t

确保访问react-popup主页

谢谢阅读！ 如果您认为其他人应该阅读此帖子并使用此项目，则发推文并分享该帖子。

请记住跟随我，这样您就可以收到有关我将来的帖子的通知。

From: https://hackernoon.com/create-react-modal-using-reactjs-popup-m24m231v1