Animate form submit notice on click in React.js

Question

I am creating a React app using a custom contact form. Everything works as it should, except that I am not sure how to fade in and time out the block with my notice that the message is sent.

Here you can see my code:

const Contact = () => {
const [notice, setNotice] = useState(false);
const handleSubmit = async (e) => {
    e.preventDefault();
    const { name, surname, phone, email, message } = e.target.elements;
    let details = {
      name: name.value,
      surname: surname.value,
      phone: phone.value,
      email: email.value,
      message: message.value,
    };
    let response = await fetch("http://localhost:5000/contact", {
      method: "POST",
      headers: {
        "Content-Type": "application/json;charset=utf-8",
      },
      body: JSON.stringify(details),
    });
    let result = await response.json();
    setNotice(result.status);
    e.target.reset();
 }
}

{notice}

user_6126373 · Answer

You can use a custom hook for this which uses a setTimeout timer to disappear after the specified time. The example useNotification() below returns a component to display the message and a callback you can use to trigger the notification to appear.

function useNotification() {
  const [message, setMessage] = React.useState(null);

  // runs when message state changes
  React.useEffect(() => {
    // if there is no message, don't run anything below this
    if (!message) { return; }

    // start a 5 sec timer and reset the message state when it expires
    const timer = window.setTimeout(() => setMessage(null), 5000);

    // the returned function runs on unmount
    return () => {
      window.clearTimeout(timer);
    };
  }, [message]);

  // call this with the message to update state
  // once the state is updated, the function in useEffect hook above runs
  function addNotification(notification) {
    setMessage(notification);
  }

  // component to display the notification message
  function Notification() {
    return (
      
        {message && {message}}
      
    );
  }

  // return the component to display the message, and a callback to trigger
  return [Notification, addNotification];
}

Check out the working demo below:

function useNotification() {
  const [message, setMessage] = React.useState(null);
  const [messageType, setMessageType] = React.useState('info');
  const DELAY = 5000;

  React.useEffect(() => {
    if (!message) { return; }

    const timer = window.setTimeout(() => setMessage(null), DELAY);

    return () => {
      window.clearTimeout(timer);
    };
  }, [message]);

  function addNotification(notification, type = 'info') {
    setMessage(notification);
    setMessageType(type);
  }

  function Notification() {
    return (
      
        {message && {message}}
      
    );
  }

  return [Notification, addNotification];
}

function ContactForm({ addNotification }) {
  const [email, setEmail] = React.useState('terry@site.io');
  const [name, setName] = React.useState('Terry');
  const [message, setMessage] = React.useState("Don't you love React?!");
  const [error, setError] = React.useState(false);

  function handleSubmit(e) {
    e.preventDefault();

    // send message...

    // display notification
    if (error) {
      addNotification('Something went wrong. Try again!', 'error');
    } else {
      addNotification(`Thanks for your message, ${name}!`, 'success');
    }
  }

  return (
    
      
        Name:
         setName(e.target.value)}
          value={name}
        />
      
      
        Email:
         setEmail(e.target.value)}
          value={email}
        />
      
      
        Message:
         setMessage(e.target.value)}
          value={message}
        />
      </label>
      <label className="checkbox">
        <input
          type="checkbox"
          checked={error}
          onChange={(e) => setError(e.target.checked)}
        />
        Click this to see error message
      </label>
      <button type="submit">Send message</button>
    </form>
  );
}

function App() {
  const [Notification, addNotification] = useNotification();

  return (
    <div className="wrapper">
      <ContactForm addNotification={addNotification} />
      <Notification />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  box-sizing: inherit;
}

body {
  box-sizing: border-box;
  color: #554f4f;
  font-family: sans-serif;
  font-size: 18px;
  line-height: 1.4;
  margin: 0;
}

.wrapper {
  margin: 0 auto;
  max-width: 400px;
  padding: 1rem;
}

button,
input,
textarea {
  border: 3px solid #ccc;
  border-radius: 4px;
  color: inherit;
  display: block;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0.25rem 0 1rem;
  padding: 0.5rem;
  width: 100%;
}

button {
  background-color: #333;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 1rem;
}

.checkbox {
  display: flex;
}

input[type="checkbox"] {
  margin-left: 1rem;
  margin-right: 1rem;
  transform: scale(1.5);
  width: auto;
}

.notification {
  animation: fadein 0.3s ease-in-out;
  background-color: #c8d8ff;
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
  color: rgba(0, 0, 0, 0.75);
  text-align: center;
}

.notification-error {
  background-color: #f9c5c5;
}

.notification-success {
  background-color: #d9f59f;
}

.notification-content {
  padding: 1rem;
}

@keyframes fadein {
  from {
    opacity: 0;
    transform: translateY(-20%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div></code></pre>
</div>
</div>
</p>

Animate form submit notice on click in React.js

1 Answers