React Synthetic events:

1.mouse event
	-mouseover
2.keyboard events
	-keyup
	-keydown
	-keypress
3.button events
	-onclick
4.element state events
	-onfocus
	-onblur
5.clipboard events
	-oncut
	-oncopy


ex:

import axios from "axios"
import { useEffect, useState } from "react"

export function Flipkart() {

    const [images, setImages] = useState([{ img_src: '' }])
    const [preview, setPreview] = useState('')
    function LoadImages() {
        axios.get("mobile.json")
            .then(response => {
                setImages(response.data)
            })
    }
    useEffect(() => {
        LoadImages()
    }, [])
    function DisplayImage(e) {
        setPreview(e.target.src)
    }
    return (
        <div>
            <div className="row mt-4">

                <div className="col-2">
                    {
                        images.map(image =>
                            <img src={image.img_src} width="75%" className="d-block my-3 border border-3 border-secondary" onMouseOver={DisplayImage}></img>
                        )
                    }
                </div>

                <div className="col-10">
                    <img src={preview} alt="" width="300" height="400" />
                </div>

            </div>
        </div>
    )
}


Style-binding:

	Stylebinding is a technique where the styles are dynamically configured for an element

	In JS
	<h1>Welcome</h1>
	
we need to dynamically change the appearance
	document.querySelector("h1").style.textAlign="center"

in dynamic scenarios we use camel casing
	text-align=>textAlign
	background-color=backgroundColor
	font-size=fontSize
	color=>color

<h1 style="text-align:center,font-size:40px"></h1>  //perfectly valid in HTML but invalid in react


<h1 style={{textAlign:'center',fontSize:'40px'}}></h1> //valid on react

example 

<h1 style={{ color: 'red', textAlign: 'center' }}>Abhi Shopping Mall</h1>

style={{ color: 'red', textAlign: 'center' }}

style object contains key and value
key is style prop defined in camelCase
value is defined in string format

Real time example of style binding

import { useState } from "react"

export function StyleBinding() {
    const [textColor, setTextColor] = useState({ color: 'black' })
    function ChangeColor(ourColor) {
        setTextColor({ color: ourColor })
    }
    function ResetColor() {
        setTextColor({ color: 'black' })
    }
    return (
        <div>
            <h2>Style Binding</h2>
            <div className="d-flex">
                <div style={{ backgroundColor: 'red', height: '50px', width: '60px' }} onMouseOver={() => ChangeColor('red')} onMouseOut={ResetColor}></div>
                <div style={{ backgroundColor: 'blue', height: '50px', width: '60px' }} onMouseOver={() => ChangeColor('blue')} onMouseOut={ResetColor}></div>
                <div style={{ backgroundColor: 'green', height: '50px', width: '60px' }} onMouseOver={() => ChangeColor('green')} onMouseOut={ResetColor}></div>
            </div>
            <div style={textColor}>Demo Text</div>
        </div>
    )
}


React Class Binding:
 
Class binding is a technique used to configure CSS classes to elements dynamically

jsx cant use class attribute to bind css classes
jsx require className prop to bind a CSS class


syntax:

<h1 className="text-primary bg-danger"/>


ex:

import { useState } from "react"

export function ClassBinding() {
    const [theme, setTheme] = useState('')
    const [btnTheme, setBtnTheme] = useState('btn btn-dark w-100')
    function SwitchTheme(e) {
        if (e.target.checked) {
            setTheme('border border-1 p-4 bg-dark text-white')
            setBtnTheme('btn btn-light w-100')
        }

        else {
            setTheme('border border-1 p-4')
            setBtnTheme('btn btn-dark w-100')
        }
    }
    return (
        <div className="container-fluid">
            <div className="d-flex justify-content-center align-items-center" style={{ height: '100vh' }}>
                <form action="" className={theme}>
                    <div className="form-switch">
                        <input type="checkbox" name="" id="" className="form-check-input" onChange={SwitchTheme} /><label>Dark Theme</label>
                    </div>
                    <h3 className="bi bi-person-fill">User Login</h3>
                    <dl>
                        <dt>Username</dt>
                        <dd><input type="text" name="" id="" className="form-control" /></dd>
                        <dt>Password</dt>
                        <dd><input type="password" name="" id="" className="form-control" /></dd>
                    </dl>
                    <button className={btnTheme}>Login</button>


                </form>


            </div>
        </div>
    )
}

Now we will see some keyboard events

onKeyUp
onKeyDown
onKeyPress

ex in HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function Verify() {
            var username = document.getElementById("uname").value
            if (username == "abhi") {
                document.querySelector("p").innerHTML = "Username not availaible"
            }
            else {
                document.querySelector("p").innerHTML = "Username availaible"
            }
        }
    </script>
</head>

<body>
    Username:<input type="text" name="" id="uname" onkeyup="Verify()">
    <p></p>
</body>

</html>


if u use keypress instead of onkeyup in the above example keypress works only when u key in next character which is not suitable for our scenario

keypress is used when u want to read ascii values or character specific things but react community doesn't recommend it.

we can use instead:

string properties
charAt
charCodeAt(0)

or onkeychange

keyup and keydown are the events used with elements when u are verifying input chars
keypress is used with elements when u are verifying the ASCII code of input chars

keypress fires up when u finish current key and start keying in another key.

ex:
import axios from "axios"
import { useEffect, useState } from "react"

export function KeyDemo() {
    const [users, setUsers] = useState([{ UserId: '' }])
    const [userError, setUserError] = useState('')
    const [userClass, setUserClass] = useState('')

    useEffect(() => {
        axios.get('user.json')
            .then(response => {
                setUsers(response.data)
            })
    })

    function VerifyUser(e) {
        var userId = e.target.value
        for (var user of users) {
            if (user.UserId == userId) {
                setUserError("User Id already taken")
                setUserClass("text-danger")
                break;
            }
            else {
                setUserError("User id is availaible")
                setUserClass("text-success")
            }
        }
    }
    return (
        <div className="container-fluid">
            <h2>Register user</h2>
            <dl>
                <dt>Username</dt>
                <dd><input type="text" name="" id="" onKeyUp={VerifyUser} /></dd>
                <dd className={userClass}>{userError}</dd>
                <dt>Password</dt>
                <dd><input type="password" name="" id="" /></dd>
            </dl>



        </div>
    )
}

extended example

import axios from "axios"
import { useEffect, useState } from "react"

export function KeyDemo() {
    const [users, setUsers] = useState([{ UserId: '' }])
    const [userError, setUserError] = useState('')
    const [userClass, setUserClass] = useState('')
    const [pwd, setPwd] = useState('')

    useEffect(() => {
        axios.get('user.json')
            .then(response => {
                setUsers(response.data)
            })
    })

    function VerifyUser(e) {
        var userId = e.target.value
        for (var user of users) {
            if (user.UserId == userId) {
                setUserError("User Id already taken")
                setUserClass("text-danger")
                break;
            }
            else {
                setUserError("User id is availaible")
                setUserClass("text-success")
            }
        }
    }
    function VerifyPassword(e) {
        if (e.target.value.match(/(?=.*[A-Z])\w{4,15}/)) {
            setPwd("Strong Password")
            setUserClass("text-success")
        }
        else {
            if (e.target.value.length < 4) {
                setPwd("Poor Password")
                setUserClass("text-danger")
            }
            else {
                setPwd("Weak password")
                setUserClass("text-warning")
            }
        }
    }
    return (
        <div className="container-fluid">
            <h2>Register user</h2>
            <dl>
                <dt>Username</dt>
                <dd><input type="text" name="" id="" onKeyUp={VerifyUser} /></dd>
                <dd className={userClass}>{userError}</dd>
                <dt>Password</dt>
                <dd><input type="password" name="" id="" onKeyUp={VerifyPassword} /></dd>
                <dd className={userClass}>{pwd}</dd>
            </dl>



        </div>
    )
}


ex:
import axios from "axios"
import { useEffect, useState } from "react"

export function KeyDemo() {
    const [users, setUsers] = useState([{ UserId: '' }])
    const [userError, setUserError] = useState('')
    const [userClass, setUserClass] = useState('')
    const [pwd, setPwd] = useState('')
    const [pwdStrength, setPwdStrength] = useState({ width: '' })
    const [bgClass, setBgClass] = useState("")

    useEffect(() => {
        axios.get('user.json')
            .then(response => {
                setUsers(response.data)
            })
    })

    function VerifyUser(e) {
        var userId = e.target.value
        for (var user of users) {
            if (user.UserId == userId) {
                setUserError("User Id already taken")
                setUserClass("text-danger")
                break;
            }
            else {
                setUserError("User id is availaible")
                setUserClass("text-success")
            }
        }
    }
    function VerifyPassword(e) {
        if (e.target.value.match(/(?=.*[A-Z])\w{4,15}/)) {
            setPwd("Strong Password")
            setUserClass("text-success")
            setPwdStrength({ width: '100%' })
            setBgClass("bg-success")
        }
        else {
            if (e.target.value.length < 4) {
                setPwd("Poor Password")
                setUserClass("text-danger")
                setPwdStrength({ width: '45%' })
                setBgClass("bg-danger")
            }
            else {
                setPwd("Weak password")
                setUserClass("text-warning")
                setPwdStrength({ width: '55%' })
                setBgClass("bg-warning")
            }
        }
    }
    return (
        <div className="container-fluid">
            <h2>Register user</h2>
            <dl className="w-25">
                <dt>Username</dt>
                <dd><input type="text" name="" id="" onKeyUp={VerifyUser} /></dd>
                <dd className={userClass}>{userError}</dd>
                <dt>Password</dt>
                <dd><input type="password" name="" id="" onKeyUp={VerifyPassword} /></dd>
                {/* <dd><meter value="80" min="1" max="100"></meter></dd> */}
                <dd>
                    <div className="progress">
                        <div style={pwdStrength} className={`progress-bar progress-bar-animated progress-bar-striped ${bgClass}`}>
                            {pwd}
                        </div>
                    </div>
                </dd>
                {/* <dd className={userClass}>{pwd}</dd> */}
            </dl>



        </div>
    )
}


While working with keyboard events what are the arguments we can use:
-keycode:it returns actual ASCII code of key
-charCode: it returns code of char according to UTF
-which: similar to keycode but compatible with various layout
-shiftKey: retuns Boolean true or false
-ctrlKey: same
-altKey:same

import axios from "axios"
import { useEffect, useState } from "react"

export function KeyDemo() {
    const [codeError, setCodeError] = useState('d-none')
    function VerifyCode(e) {
        if (e.which >= 65 && e.which <= 90) {
            setCodeError('d-block')
        } else {
            setCodeError('d-none')
        }
    }

    return (
        <div className="container-fluid">
            <dl className="w-25">
                <dt>Verify Code</dt>
                <dd><input type="text" name="" id="" className="form-control" placeholder="Lower case only" onKeyPress={VerifyCode} /></dd>
                <dd className={codeError}>
                    <div className="text-warning">
                        <span className="bi bi-exclamation-triangle-fill">Warning: Caps is on</span>
                    </div>
                </dd>
            </dl>



        </div>
    )
}

task: to try apart from event such as keypress



Element State events:

onChange: action when value changes
onBlur: Action when element lost focus
onFocus: action when element got focus


import { useState } from "react"

export function StateEvent() {
    const [msg, setMsg] = useState('')
    function HandleFocus() {
        setMsg("IFSC Code: SBIN0001498,HDFC00004356")
    }

    function HandleBlur() {
        setMsg('')
    }
    return (
        <div className="container-fluid">
            <h2>State Events</h2>
            <dl>
                <dt>Bank IFSC Code</dt>
                <dd><input type="text" name="" id="" onFocus={HandleFocus} onBlur={HandleBlur} /></dd>
                <dd className="text-danger">{msg}</dd>
            </dl>
        </div>
    )
}

example:

import { useState } from "react"

export function StateEvent() {
    const [msg, setMsg] = useState('')
    const [code, setCode] = useState('')
    function HandleFocus() {
        setMsg("IFSC Code: SBIN0001498,HDFC00004356")
    }

    function HandleBlur() {
        setMsg('')
    }
    function HandleChange(e) {
        setCode(e.target.value.toUpperCase())
    }
    return (
        <div className="container-fluid">
            <h2>State Events</h2>
            <dl>
                <dt>Bank IFSC Code</dt>
                <dd><input type="text" name="" id="" onFocus={HandleFocus} onBlur={HandleBlur} onChange={HandleChange} value={code} /></dd>
                <dd className="text-danger">{msg}</dd>
            </dl>
        </div>
    )
}

Button events

-onClick()
-onDoubleClick()  in JS its ondblclick
-onContextMenu  right click
-onSelectStart in JS react will currently not support it


ex:
export function ButtonEvent() {
    function HandleDbClick() {
        window.open('iphone15.png', 'Iphone', 'width=300 height=300')
    }
    function HandleContextMenu() {
        document.oncontextmenu = function () {
            alert("right click is disabled")
            return false
        }
    }
    return (
        <div onContextMenu={HandleContextMenu}>
            <h2>Button Events</h2>
            <img src="iphone15.png" alt="" width='100' height='100' onDoubleClick={HandleDbClick} />
            <p>Double click on image to view enlarged image</p>
        </div>
    )
}