Add shake animation when the character limit react 100

Question

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

santhosh stephen · Accepted Answer · 2022-03-01T09:30:43.833

1

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>
  );
}

your shaking animation code is not working, make changes in the keyframes for desired animation.
upon 100 character the animation class will be added. but once added you may need to remove the class, inorder to display the animation once again if the character is 100.

reference: https://stackoverflow.com/questions/58948890/how-to-apply-custom-animation-effect-keyframes-in-mui[1]

edited Mar 01 '22 at 09:30

answered Mar 01 '22 at 07:53

santhosh stephen

26
6

oh sorry about that, typos – Mar 01 '22 at 07:57
it should be 100 – Mar 01 '22 at 07:57
does it work now? – santhosh stephen Mar 01 '22 at 07:58
no, still not working – Mar 01 '22 at 08:02
you haven't used `isShake` in the component? – santhosh stephen Mar 01 '22 at 08:10
you should ask about clarifications on a comment from the question itself. – juagicre Mar 01 '22 at 08:13
nope, dont know how – Mar 01 '22 at 08:15
do not have enough reputation to comment in a question – santhosh stephen Mar 01 '22 at 08:15
I've just updated the question with using the `isShake` but it didnt work – Mar 01 '22 at 08:19
can you make a sandbox out of this? – santhosh stephen Mar 01 '22 at 08:20
please see the question – Mar 01 '22 at 08:35
your snippet have error – Mar 01 '22 at 10:12
`{ "message": "Uncaught SyntaxError: Cannot use import statement outside a module", "filename": "https://stacksnippets.net/js", "lineno": 12, "colno": 9 }` – Mar 01 '22 at 10:13
snippet won't work , just run the code in sandbox. – santhosh stephen Mar 01 '22 at 10:24
I can see the effect now, but why not shake? just opacity? – Mar 01 '22 at 11:08
anyways, i will mark this as correct – Mar 01 '22 at 11:09
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/242515/discussion-between-santhosh-stephen-and-kaito). – santhosh stephen Mar 01 '22 at 11:21

Add shake animation when the character limit react 100

1 Answers1