Tag: useState

Sliding Login/Signup form in React

How to create a sliding login / signup form in Reactjs


Reactjs is a frontend UI library for developing sophisticated web/native applications using Typescript/Javascript. The library is backed by Facebook and opensource community. For me it is like having a swiss knife in my tool kit.

Sliding form component

The basic idea and CSS styles were adapted from the CodePen author,

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
.h1 {
font-weight: bold;
margin: 0;
}
.h2 {
text-align: center;
}
.p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
.span {
font-size: 12px;
}
.a {
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
.button {
border-radius: 20px;
border: 1px solid #FF4B2B;
background-color: #FF4B2B;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
.button:active {
transform: scale(0.95);
}
.button:focus {
outline: none;
}
.button.ghost {
background-color: transparent;
border-color: #FFFFFF;
}
.form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
}
.input {
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
@keyframes show {
0%, 49.99% {
opacity: 0;
z-index: 1;
}
50%, 100% {
opacity: 1;
z-index: 5;
}
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active .overlay-container{
transform: translateX(-100%);
}
.overlay {
background: #FF416C;
background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
background: linear-gradient(to right, #FF4B2B, #FF416C);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {
transform: translateX(-20%);
}
.container.right-panel-active .overlay-left {
transform: translateX(0);
}
.overlay-right {
right: 0;
transform: translateX(0);
}
.container.right-panel-active .overlay-right {
transform: translateX(20%);
}
.social-container {
margin: 20px 0;
}
.social-container a {
border: 1px solid #DDDDDD;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
.footer {
background-color: #222;
color: #fff;
font-size: 14px;
bottom: 0;
position: fixed;
left: 0;
right: 0;
text-align: center;
z-index: 999;
}
.footer p {
margin: 10px 0;
}
.footer i {
color: red;
}
.footer a {
color: #3c97bf;
text-decoration: none;
}
view raw login.module.css hosted with ❤ by GitHub
import classNames from 'classnames'
import React, { useEffect, useState } from 'react'
import styles from "../styles/login.module.css"
export default function LoginForm() {
const [panelMovementClass, setClass] = useState('right-panel-active')
const [isRightPanel, setRightPanel] = useState(true)
useEffect(() => {
isRightPanel ? setClass('right-panel-active') : setClass('')
})
return (
<div className={classNames(styles.container, styles[panelMovementClass])}>
<div className={classNames(styles['form-container'], styles['sign-up-container'])}>
<form action="#" className={styles.form} >
<h1 className={styles.h1}>Create Account</h1>
<div className={styles['social-container']}>
<a href="#" className={classNames(styles.social, styles.a)}><i className={classNames(styles.fab, styles['fa-facebook-f'])}></i></a>
<a href="#" className={classNames(styles.social, styles.a)}><i className="fab fa-google-plus-g"></i></a>
<a href="#" className={styles.social}><i className="fab fa-linkedin-in"></i></a>
</div>
<span className={styles.span}>or use your email for registration</span>
<input className={styles.input} type="text" placeholder="Name" name='name' />
<div>
</div>
<input className={styles.input} type="email" placeholder="Email" name='email' />
<input className={styles.input} type="password" placeholder="Password" name='password' />
<button className={styles.button} type='submit' >Sign Up</button>
</form>
</div>
<div className={classNames(styles['form-container'], styles['sign-in-container'])}>
<form action="#" className={styles.form} >
<h1 className={styles.h1}>Sign in</h1>
<div className={styles['social-container']}>
<a href="#" className={styles.social}><i className={classNames(styles.fab, styles['fa-facebook-f'])}></i></a>
<a href="#" className={styles.social}><i className={classNames(styles.fab, styles['fa-google-plus-g'])}></i></a>
<a href="#" className={styles.social}><i className={classNames(styles.fab, styles['fa-linkedin-in'])}></i></a>
</div>
<span className={styles.span}>or use your account</span>
<input className={styles.input} type="email" placeholder="Email" />
<input className={styles.input} type="password" placeholder="Password" />
<a href="#">Forgot your password?</a>
<button className={styles.button} type='submit'>Sign In</button>
</form>
</div>
<div className={styles['overlay-container']}>
<div className={styles.overlay}>
<div className={classNames(styles['overlay-panel'], styles['overlay-left'])}>
<h1>Welcome Back!</h1>
<p>To keep connected with us please login with your personal info</p>
<button onClick={() => setRightPanel(false)} className={classNames(styles.ghost, styles.button)} id="signIn">Sign In</button>
</div>
<div className={classNames(styles['overlay-panel'], styles['overlay-right'])}>
<h1 className={styles.h1}>Hello, Friend!</h1>
<p className={styles.p}>Enter your personal details and start journey with us</p>
<button onClick={() => setRightPanel(true)} className={classNames(styles.ghost, styles.button)} id="signUp">Sign Up</button>
</div>
</div>
</div>
</div>
)
}
view raw loginForm.tsx hosted with ❤ by GitHub
This is a simple Reactjs SlidingLoginSignUpForm Component
view raw React-Sliding-LoginForm hosted with ❤ by GitHub

Looking for complete source? have a look @ My-React-Components repo

Create Mui Dark Mode switch using React Context

How to creaye dark theme switch in using Material UI switch and React Context and State Hooks


Material UI or MUI is one word for all UI needs. It is well documented and easy to use. I really enjoyed it.

In this post I would like to demonstrate how to create dark-mode switcher using the React Context and Material UI switch component.

Context

We already covered the dynamic-Context in detail, please use the posts to learn more about Context and the basic step required.

Our context setup with look like the following 

//context/themeContext.js
 import React from 'react';

export const ThemeContext = React.createContext({
    theme: 'dark',
    setTheme: () => { }
  })
  

//app.js or _app.js
 
import React, { useState } from 'react'; 
import { ThemeContext } from '../context/themeContext';


function MyApp({ Component, pageProps }) {
  const [theme, setTheme] = useState("light")
  const value = { theme, setTheme };
 

  return (
  
      <ThemeContext.Provider value={value}   >
        <Component {...pageProps} />
      </ThemeContext.Provider>
    
  );
}

Theme Switcher

A MUI customized switch can be used to create a theme switcher. We also need to access the context using the useContext hook. The code will look like the following.

The complete switch snippet can be obtained from Material UI switch documentation page. 

import * as React from 'react';
import clsx from 'clsx';
import { styled } from '@mui/system';
import { useSwitch } from '@mui/core/SwitchUnstyled';
import { Tooltip } from '@mui/material';
import { ThemeContext } from '../context/themeContext';
 ...
function MUISwitch(props) {
  const { theme, setTheme } = React.useContext(ThemeContext)
  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
  const stateClasses = {
    checked,
    disabled,
    focusVisible,
  };
  var mode = {

  };

 
  React.useEffect(() => {
    const mode = stateClasses.checked ? 'dark' : 'light'
    setTheme(mode)
  }, [stateClasses])
  return (
    <Tooltip title="Theme switcher">
      <SwitchRoot className={clsx(stateClasses)} >
        <SwitchTrack>
          <SwitchThumb className={clsx(stateClasses)} />
        </SwitchTrack>
        <SwitchInput {...getInputProps()} aria-label="Demo switch" />
      </SwitchRoot>
    </Tooltip>

  );
}

export default function UseSwitchesCustom() {
  return <MUISwitch defaultChecked />;
}

The switcher component can be placed anywhere in component tree and it can change the context value, due to dynamic context.

Tracking changes

In order observe changes in state of the switch component , we can use useEffect and the stateClass. Note that there is no event handler attached to the component.

Implement the Theme

The theme can be implemented as you wish, one of the suggested way is to create a component to implement the theme and wrap other components inside it. Such a component can be .

mport React from 'react'
import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
import { ThemeContext } from '../context/themeContext';

export default function BaseTheme(props) {
    const { theme, setTheme } = React.useContext(ThemeContext)
    const theme1 = createTheme(
        {
            palette:
                { mode: theme }
        }
    );

    console.log('Current Theme - ' + JSON.stringify(theme));
    return (
        <div>
            <ThemeProvider theme={theme1} >
                {props.children}
            </ThemeProvider>
        </div>
    )
}

That’s it.

Leave comment and questions

Dynamic context in React

How to make a React context update dynamically on functional component tree.


Dynamic context is programing concept it is not a React feature. Dynamic context allow us update the state from deep nested components. Let’s dive into the example

We are going to use the following

  • useState
  • useContext
  • React.createContext

State

What is a state in React? State is where we kept our data, it can be simple any value, such as count, an User object, or an array of Posts etc.

Context

Context is simplest way to pass state through component tree in Reactjs. It requires a context and a state. A context provider allow us to initialize/update the state. In our example we use provider for initialization only, rest of the work is done with setter function.

Language example

A language example is the simplest way to demonstrate the use of Context and hooks in React. In the App.js create the LanguageContext and inititalContext

This is functional component example in which a Language context used to store and manipulate state.

Create Context

//App.js
const LanguageContext = React.createContext({
  language: "en",
  setLanguage: () => {}
});

Notice the setLanguage key, it is function placeholder for updating the state, and all component using the context get the new value. React Context also provides Provider to update the state.

The language state is initialized with en value, short for English.

Pages: Page 1, Page 2

A quick guide to React Context

How to use React Context and change the state from a component


This is my first React context post. It will help you setup state using context and pass it through the component tree.

We are going to use the following

  • useState
  • Context Consumer
  • Context Provider
  • functional component
  • Minimal react app

State

What is a state in React? State is where we kept our data, it can be simple any value, such as count, an User object, or an array of Posts etc.

Context

Context is simplest way to pass state through component tree in Reactjs. It requires a context and a state. A context provider allow us to initialize/update the state.

Language example

A language example is the simplest way to demonstrate the use of Context in React app. In the App.js create the LanguageContext and inititalContext

This is functional component example in which a Language context used to store and manipulate state.

Create Context

//App.js
const LanguageContext = React.createContext({
  language: "fr",
});

The language state is initialized with fr value, short for French.

Pages: Page 1, Page 2