0

Disclaimer: This is my first reactjs application, so please feel free to just tell me which section I should be reading.

I'm using react-modal to create a simple modal. There are 2 very similar modals, so I created a AuthModal that wraps the content for both the modals, a Login modal and a Register modal. I want to be able to trigger the modal open from 3 or 4 different places (and potentially more). However, I'm stuck. I'm not sure how to make a modal into somewhat of a "global" component, and how I should approach opening it from different buttons. 

class Login extends React.Component {

    render() {
        return <div>
            <NavItem text="Login" click={() => this.refs.modal.openModal()} />
            <AuthModal ref="modal" contentLabel="Login Modal">
                <h1>Login</h1>
                <div className="SocialLogin">
                    <FacebookLogin
                        appId={config.FB.APP_ID}
                        autoLoad={true}
                        fields={config.FB.SCOPES}
                        textButton=""
                        callback={responseFacebook}
                        cssClass="SocialButtonWrapper"
                        icon={<SocialButtonContent
                            iconName="facebook-official"
                            title="Log In Using Facebook"
                            size="2x"
                        />} />
                    <GoogleLogin
                        clientId={config.GOOGLE.CLIENT_ID}
                        onSuccess={responseGoogle}
                        onFailure={responseGoogle}
                        className="SocialButtonWrapper"
                        style={
                            {
                                display: "inline-block"
                            }
                        }
                    >
                        <SocialButtonContent
                            iconName="google"
                            title="Log In Using Google"
                            size="2x"
                        />
                    </GoogleLogin>

                </div>
                <Separator />
                <div className="PasswordLogin">

                    <AuthInput
                        name="email"
                        type="text"
                        placeholder="Email Address"
                        img={email}
                    />

                    <AuthInput
                        name="password"
                        type="password"
                        placeholder="Password"
                        img={lock}
                    />

                    <ForgotPasswordLink />

                    <AuthActionButton
                        text="Login"
                    />
                    <span className="AuthLink">Don't have an account?</span>

                    <div className="AuthLinkHighlight Center AnimateTransition-200-Ease">
                        <a href="#">
                            Sign Up
                        </a>
                    </div>



                </div>

            </AuthModal>
        </div>
    }
}

As you can see this.refs.modal.openModal()} /> is what opens the modal. Which now restricts me from being able to open the modal from different places. , as I'd have to make a whole new instance of the component. Is there any way to make this into a "global" component using Mobx or can someone point me to the right topic to read up on?

Tim
  • 107
  • 1
  • 1
  • 9
  • putting the modal up the hierarchy of your app doesn't help ? maybe place it directly below your root - component, so every child / grand-child can access it – Sebastian Jun 08 '17 at 15:10
  • Hmm, so if the strategy would be to put it up as part of the "App" component, and how would I call the open from deeply nested children? Pass it in as a prop? – Tim Jun 08 '17 at 20:40

0 Answers0