How to use the react-modal.setAppElement function in react-modal

To help you get started, we’ve selected a few react-modal examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github stimpack-io / stimpack / resources / assets / js / storm / BaseIndependentManipulator.js View on Github external
constructor(props) {
        super("srd-independent-node", props);                
        Modal.setAppElement('#main');        
        this.state = {};
        if(!(typeof(this.props.node.data) == "object")) {
            this.state.data = AllManipulators[this.constructor.name].getDefaultManipulatorParameters();            
            // attach data to node
            this.props.node.data = this.state.data;
        } else {
            this.state.data = this.props.node.data; 
        }        
	}
github Aninstance / simple-stock-management / public / src / stock-update-modal.js View on Github external
import React from "react";
import "./css/stock-update-modal.css";
import Modal from "react-modal";
import StockUpdateTable from "./stock-update-table.js";
import StockUpdateDelete from "./stock-update-delete.js";
import processRequest from "./api.js";

Modal.setAppElement(document.body);

Modal.defaultStyles.overlay.backgroundColor = "cornflowerblue";
const REGULAR_STYLES = {
  content: {
    top: "50%",
    left: "50%",
    right: "auto",
    bottom: "auto",
    marginRight: "-50%",
    transform: "translate(-50%, -50%)",
    backgroundColor: "#001e00",
    color: "yellow",
    border: "1px solid yellow",
    borderRadius: "7px 7px 7px 7px",
    boxShadow: "-7px -7px 17px 7px #001e00",
    maxWidth: "800px",
github FujitsuLaboratories / cattaz / src / Main.jsx View on Github external
componentDidMount() {
    Modal.setAppElement(this.refContainer.current);
    this.getListPages();
  }
github Parrit / Parrit / frontend / src / dashboard / runDashboard.js View on Github external
export default function runDashboard() {
    const store = createStore(dashboardReducer, applyMiddleware(Thunk))

    ReactDOM.render(
        
            
        ,
        document.getElementById('reactRoot')
    )

    Modal.setAppElement('#reactRoot')
}
github nlaz / flashcards-for-developers / src / app / auth / SignupFormModal.js View on Github external
import React, { Component } from "react";
import Modal from "react-modal";
import { Link } from "react-router-dom";
import cookie from "js-cookie";

import * as api from "../apiActions";
import Octicon from "../../components/Octicon";
import * as analytics from "../../components/GoogleAnalytics";
import * as localStorage from "../utils/localStorage";

if (process.env.NODE_ENV !== "test") {
  Modal.setAppElement("#root");
}

const ERRORS = { REQUIRED: "Required", INVALID: "Invalid" };

class SignupFormModal extends Component {
  state = {
    profile: { email: "", name: "", email_notification: true },
    errors: { email: undefined, name: undefined },
  };

  componentDidMount() {
    this.setState({ profile: { ...this.props.profile, email_notification: true } });
  }

  validateEmail = email => {
    const isValid = email.match(/^([\w.%+-]+)@([\w-]+\.)+([\w]{2,})$/i);
github nlaz / flashcards-for-developers / src / app / auth / LoginModal.js View on Github external
import React from "react";
import qs from "query-string";
import Modal from "react-modal";

import config from "../../config/index";
import Octicon from "../../components/Octicon";
import * as analytics from "../../components/GoogleAnalytics";

const GITHUB_PARAMS = qs.stringify({
  client_id: config.githubOAuthClientId,
  redirect_uri: config.githubOAuthRedirectURI,
});
const GITHUB_OAUTH_URL = `https://github.com/login/oauth/authorize?${GITHUB_PARAMS}`;

if (process.env.NODE_ENV !== "test") {
  Modal.setAppElement("#root");
}

const LoginModal = ({ isOpen, onClose }) => (
  
    <button>
      
    </button>
    <div style="{{">
      <div>
        <h5>Login to Flashcards for Developers</h5>
        <p>
          Sign in to save your progress and track your favorite decks across devices.
        </p>
      </div>
      <div>
        </div></div>
github christiannwamba / calendar-app / src / components / Event / EventModal.js View on Github external
import EventForm from '../Event/EventForm';
import './Event.css';

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

Modal.setAppElement('#root');

const EventModal = ({ isOpen, closeModal, event }) =&gt; {
  return (
    
      <p>
        X
      </p>
github AxaGuilDEv / react-toolkit / packages / Modal / default / src / ModalCore.tsx View on Github external
import * as React from 'react';
import * as ReactModal from 'react-modal';
import {
  withClassDefault,
  withClassModifier,
  WithClassModifierOptions,
  compose,
} from '@axa-fr/react-toolkit-core';

const DEFAULT_CLASSNAME = 'af-modal';

ReactModal.setAppElement('body');

interface ModalCoreComponentProps {
  isOpen: boolean;
  onOutsideTap: (event: MouseEvent | KeyboardEvent) =&gt; void;
  className?: string;
}

const ModalCoreRaw: React.SFC = props =&gt; (
  
    <div>
      <div>{props.children}</div>
    </div>