React hook form validation – Tolmatol – Bootstrap Snippets, React js snippets, jQuery Snippets Collections.

App.js

import React from 'react';
import './App.css';
import MainRoute from './Login/MainRoute';
import NavMenu from './Login/Navmenu';

function App() {
  return (
    <div className="container-fluid">
      <div className="row">
        <div className="col-md-6 ">
          <NavMenu />
          <div className="innerContent">
            <MainRoute />
          </div>
        </div>
        <div className="col-md-6 vh-100 d-none d-md-block" style={{ background: 'url(https://i.ibb.co/8KxkYCm/pexels-photo-2530580.jpg)' }}></div>
      </div>
    </div>
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App'; 
import {BrowserRouter} from 'react-router-dom';

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));

Navmenu.js

import React from 'react';
import { NavLink, Link } from 'react-router-dom';

const Navmenu = () => {
    return (
        <div className="row  mt-3 mb-3">
            <div className="col-6">
                <Link to='/'><img src="https://tolmatol.com/wp-content/uploads/2020/04/tolmatol-logo-1.png" alt="tolmatol" width="120" /></Link>
            </div>
            <div className="col-6 text-right">
                <NavLink exact to="/"> Sign In </NavLink> |
        <NavLink to='/register/'>Register</NavLink>
            </div>
        </div>
    );
};

export default Navmenu;

MainRoute

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import SignIn from '../Login/SignIn';
import Register from '../Login/Register';

const MainRoute = () => (
    <Switch>
        <Route exact path={["/", "/signIn/"]} component={SignIn} />
        <Route exact path='/register/' component={Register} />
    </Switch>
)


export default MainRoute;

SignIn.js

import React from 'react';
import './SignIn.css';
import { Form, Button } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import { useForm } from 'react-hook-form';

const SignIn = () => {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = data => {
    alert(JSON.stringify(data));
  }

  return (
    <>
      <h2>Log In</h2>
      <small>Log in to continue in our website</small>
      <Form className="mt-5" onSubmit={handleSubmit(onSubmit)}>
        <Form.Group controlId="formBasicEmail">
          <Form.Control type="text" name="email" placeholder="Email Address" ref={register({ required: true, pattern: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/ })} />
          {errors.email && <small className="text-danger form-text">Please enter a valid  Email-ID</small>}
        </Form.Group>

        <Form.Group controlId="formBasicPassword">
          <Form.Control type="password" name="password" placeholder="Password" ref={register({ required: true })} />
          {errors.email && <small className="text-danger form-text">Please enter password</small>}
        </Form.Group>
        <Form.Group controlId="formBasicCheckbox">
          <Form.Check type="checkbox" name="agree" label="Keep me logged in" className="remeber" ref={register} />
        </Form.Group>
        <Button variant="danger" className="btn-block d-block" type="submit">
          Sign In
  </Button>
      </Form>

      <div className="row  mt-5 mb-3 ">
            <div className="col-5">
            <ul className="social-link">
        <li><Link className='facebook' to='//www.facebook.com/tolmatol/' target="_blank"><i className="fa fa-facebook"></i></Link></li>
        <li><Link className='twitter' to='//twitter.com/tolmatol' target="_blank"><i className="fa fa-twitter"></i></Link></li>
         
      </ul>
            </div>
            <div className="col-7 text-right">
        <span className="text-muted"><small>Don't have an account?</small></span><Link to='/register/' className="active">Register</Link>
            </div>
        </div>
    </>
  )
}

export default SignIn

Register.js

import React from 'react';
import './SignIn.css';
import { Form, Button } from 'react-bootstrap';
import { useForm } from 'react-hook-form';

const Register = () => {

    const { register, handleSubmit, errors } = useForm();
    const onSubmit = data => {
        console.log(data)
    }

    return (
        <>
            <h2>Register</h2>
            <small>Create an account free and enjoy it</small>
            <Form className="mt-5" onSubmit={handleSubmit(onSubmit)}>
                <Form.Group controlId="fname">
                    <Form.Control type="text" name="fname" placeholder="First Name" ref={register({ required: true })} />
                    {errors.fname && <small className="text-danger form-text">Please enter first name</small>}
                </Form.Group>

                <Form.Group controlId="lname">
                    <Form.Control type="text" name="lname" placeholder="Last Name" ref={register({ required: false })} />
                </Form.Group>
                <Form.Group controlId="formBasicEmail">
                    <Form.Control type="text" name="email" placeholder="Email Address" ref={register({ required: true, pattern: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/ })} />
                    {errors.email && <small className="text-danger form-text">Please enter a valid  Email-ID</small>}
                </Form.Group>

                <Form.Group controlId="formBasicPassword">
                    <Form.Control type="password" name="password" placeholder="Password" ref={register({ required: true })} />
                    {errors.password && <small className="text-danger form-text">Please enter password</small>}
                </Form.Group>
                <Form.Group controlId="formBasicCheckbox">
                    <Form.Check type="checkbox" name="acceptTandC" label="I agree to the terms of service" className="remeber" ref={register({ required: true })} />
                    {errors.acceptTandC && <small className="text-danger form-text">Please accept T&C</small>}
                </Form.Group>
                <Button variant="danger" className="btn-block d-block" type="submit">
                    Register
  </Button>
            </Form>
        </>
    )
}

export default Register

SignIn.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
body {font-family: 'Poppins', sans-serif; color:#333}
.innerContent { max-width: 500px; margin:40px auto 0px auto;}
form { width: 100%; max-width: 500px;}
input.form-control { border: solid 1px #f1f1f1; min-height: 45px; padding: 10px 15px; background: #f1f1f1;  border-radius: 0px; box-shadow: none; }
a { color: #333; margin-left: 5px;}
a.active, a:hover { color: #f8422d; }
a:hover { text-decoration: none;}
.remeber { font-size: 14px; color: #666;}
.form-control:focus { box-shadow: none;}
@media(max-width:636px) {
    .innerContent { max-width: 80%; margin:80px auto 0px auto;}
}
/* Social Icon */
ul.social-link{list-style-type:none; padding: 0; margin:0;}
ul.social-link li{display:inline-block}
ul.social-link li a{border:1px solid #7c7c7c;color:#0f0f0f;display:block;font-size:16px;height:38px;line-height:38px;text-align:center;width:38px;border-radius:4px;position:relative;margin-right:2px;z-index:1;padding:0}
ul.social-link li a.facebook:after{background:#3b5998}
ul.social-link li a.twitter:after{background:#00aced}
ul.social-link li a:after{position:absolute;content:'';width:100%;height:100%;left:0;top:0;background:#f7c51e;transition:.4s;border-radius:4px;opacity:0;-moz-transform:scale(1.3);-ms-transform:scale(1.3);-o-transform:scale(1.3);-webkit-transform:scale(1.3);transform:scale(1.3);z-index:-1}
ul.social-link li a:hover:after{-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);-webkit-transform:scale(1);transform:scale(1);opacity:1}
ul.social-link li a:hover{border-color:transparent;color:#fff}ul.top_social{margin:0 15px 0 20px}

Preview

Try it yourself

You might also like

Leave a Reply Cancel reply