I have a component that has a limitation, character limit that if it the user reach the limit the component will shake, thats the expected result, but in my current code nothing happen.
const useStyles = makeStyles(() => ({
shake:{
animation: 'description 0.5s',
animationIterationCount: '1',
},
'@keyframes description':{
'0%': { transform: 'translate(0)' },
'15%': { transform: 'translate(-4px, 0)' },
'30%': { transform: 'translate(6px, 0)' },
'45%': { transform: 'translate(-4px, 0)' },
'60%': { transform: 'translate(6px, 0)' },
'100%': { transform: 'translate(0)' },
},
}));
const StudentAdd = ({ setOpenAlertStudent }) => {
const classes = useStyles();
const CHARACTER_LIMIT = 100;
const [isShake, setShake] = useState(false)
const onHandleChangeInputDescription = (field, value) => {
if(value.length === 100){
setShake(true)
}
......
<TextArea
label="Description (optional)"
inputProps={{
maxLength: CHARACTER_LIMIT,
}}
values={getStringDescription.name}
onChange={(value) =>
onHandleChangeInputDescription('description', value)
}
helperText={`${getStringDescription.length}/${CHARACTER_LIMIT}`}
className={
isShake
? classes.shake
: null
}
id="description"
//id={isShake === true ? classes.shake : 'description'}
/>
......
this is the sample code on codesandbox
https://codesandbox.io/s/lucid-banach-o6sc1j?file=/src/App.js:1081-1089
import React, { useState, useContext } from "react";
import "./styles.css";
import { makeStyles } from "@mui/styles";
import { TextField } from "@mui/material";
const useStyles = makeStyles(() => ({
shake: {
animation: "$description 15s",
animationIterationCount: "1"
},
"@keyframes description": {
"0%": { opacity: 0, transform: "translateY(0)" },
"15%": { transform: "translateY(-4px, 0)" },
"30%": { transform: "translateY(6px, 0)" },
"45%": { transform: "translateY(-4px, 0)" },
"60%": { transform: "translateY(6px, 0)" },
"100%": { opacity: 1, transform: "translateY(0)" }
}
}));
export default function App() {
const classes = useStyles();
console.log(classes.shake);
const CHARACTER_LIMIT = 100;
const [isShake, setShake] = useState(false);
const [getStringDescription, setStringDescription] = useState({
length: 0,
value: ""
});
const onHandleChangeInputDescription = (field, value) => {
if (value.target.value.length === 100) {
setShake(true);
}
setStringDescription({
length: value.target.value.length,
value: value.target.value
});
};
return (
<div className="App">
<TextField
label="Description"
inputProps={{
maxLength: CHARACTER_LIMIT
}}
values={getStringDescription.name}
onChange={(value) =>
onHandleChangeInputDescription("description", value)
}
helperText={`${getStringDescription.length}/${CHARACTER_LIMIT}`}
sx={{
"& .MuiInputBase-input.MuiInputBase-inputMultiline": {
height: "100px !important"
},
"& .MuiTextField-root > .MuiOutlinedInput-root": {
padding: "8.5px 14px"
}
}}
id="description"
className={isShake ? classes.shake : null}
/>
</div>
);
}