Double Slider Sign

Component in React Web to create the double slider effect on your Sign in / Sign Up screen.

Getting Started

Follow these instructions to use the component.

Import

import DoubleSliderSign from 'double_slider_sign';

Example

    <DoubleSliderSign>
    {
        {(isSignIn, isSignUp, handleSignIn, handleSignUp) => (
            <React.Fragment>
                <DoubleSliderSign.SignIn>
                    {isSignIn && <SignIn />} // Your Sign In Component
                </DoubleSliderSign.SignIn>
                <DoubleSliderSign.SignUp>
                    {isSignUp && <SignUp />} // Your Sign Up Component
                </DoubleSliderSign.SignUp>
                <DoubleSliderSign.Overlay>
                    <DoubleSliderSign.Overlay.Left>
                        <WelcomeToSignIn handleSignIn={handleSignIn} /> // Your Welcome Sign In Component
                    </DoubleSliderSign.Overlay.Left>
                    <DoubleSliderSign.Overlay.Right>
                        <WelcomeToSignUp handleSignUp={handleSignUp} /> // Your Welcome Sign Up Component
                    </DoubleSliderSign.Overlay.Right>
                </DoubleSliderSign.Overlay>
            </React.Frament>
        )
    }
    </DoubleSliderSign>