How to use react-alert - 10 common examples

return (
    <div style="{{">
      {options.type === "info" &amp;&amp; }
      {options.type === "success" &amp;&amp; }
      {options.type === "error" &amp;&amp; }
      <span style="{{">{message}</span>
      <button style="{buttonStyle}">
        
      </button>
    </div>
  );
};

export const alertOptions = {
  // you can also just use 'bottom center'
  position: positions.BOTTOM_CENTER,
  timeout: 3000,
  offset: "50px",
  // you can also just use 'scale'
  transition: transitions.SCALE
};

{options.type === "error" && }
      <span style="{{">{message}</span>
      <button style="{buttonStyle}">
        
      </button>
    
  );
};

export const alertOptions = {
  // you can also just use 'bottom center'
  position: positions.BOTTOM_CENTER,
  timeout: 3000,
  offset: "50px",
  // you can also just use 'scale'
  transition: transitions.SCALE
};

const ResetForm = matchProps => {
  const { token } = matchProps.match.params;
  const alert = useAlert();
  return (
    <div>
       {
          let errors = {};
          const { password, confirm } = values;

          const hasUpperCase = /[A-Z]/.test(password);
          const hasLowerCase = /[a-z]/.test(password);
          const hasNumbers = /\d/.test(password);
          const hasNonalphas = /\W/.test(password);

          if (
            password.length &lt; 8 ||
            hasUpperCase + hasLowerCase + hasNumbers + hasNonalphas &lt; 3</div>

const Notifications = () => {
      const alert = useAlert();

      const { updateAvailable } = React.useContext(ServiceWorkerContext);

      React.useEffect(() => {
        if (updateAvailable) {
          alert.show(
            {
              actionText: "Refresh",
              content:
                "To update the application to the latest version, please refresh the page!",
              title: "New version is available!",
            },
            {
              onClose: () => {
                location.reload();
              },

const Login = () => {
  const recaptchaRef = React.createRef();
  const [modalIsOpen, setModalIsOpen] = useState(false);
  const [failures, setFailures] = useState(0);
  const [captchaMessage, setCaptchaMessage] = useState("");
  const alert = useAlert();

  const onCaptchaChange = value => {
    if (value) {
      setCaptchaMessage("");
    }
  };

  const openModal = () => {
    setModalIsOpen(true);
  };

  const closeModal = () => {
    setModalIsOpen(false);
  };

  return (

const RegisterForm: React.FC<{ hide: () => void }> = ({ hide }) => {
  const alert = useAlert();
  return (
     showSuccessNotification(data, hide, alert)}
    >
      {(registerCustomer, { loading, data }) => {
        return (
          <form> data.accountRegister.errors, [])}
            onSubmit={(event, { email, password }) =&gt; {
              event.preventDefault();
              registerCustomer({ variables: { email, password } });
            }}
          &gt;
            </form>

const ForgotPasswordModal = ({
  errorMessage,
  modalIsOpen,
  closeModal,
  afterOpenModal,
  setForgotError
}) => {
  const alert = useAlert();
  return (
    
      
        <h2>Forgot Password</h2>
         {
            let errors = {};
            if (!values.email) {
              errors.email = "Required";

loading: checkoutLoading,
    syncWithCart,
    syncUserCheckout,
  },
  cart: {
    lines,
    remove,
    add,
    errors,
    clearErrors,
    subtract,
    loading: cartLoading,
    changeQuantity,
  },
}) => {
  const alert = useAlert();
  const { data: user } = useUserDetails();
  const hasErrors: boolean | null = maybe(() => !!errors.length);
  const isLoading =
    (!checkout && checkoutLoading) || syncWithCart || syncUserCheckout;

  React.useEffect(() => {
    if (hasErrors) {
      alert.show(
        {
          content: errors.map(err => err.message).join(", "),
          title: "Error",
        },
        { type: "error" }
      );
      clearErrors();
    }