react-spinners#BeatLoader JavaScript Examples

The following examples show how to use react-spinners#BeatLoader. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Loader.js    From amazon-connect-chat-interface with MIT No Attribution 5 votes vote down vote up 
render() {
    return (
      <BeatLoader size={5} {...this.props} />
    )
  }
Example #2
Source File: App.js    From cowin-slots with MIT License -10000 votes vote down vote up 
App = () => {
  const [loading, setLoading] = React.useState(false);

  const phoneRef = React.useRef();
  const ageRef = React.useRef();
  const pincodeRef = React.useRef();

  function isValid(length, entity) {
    switch (length) {
      case 10:
        var regx = /^[6-9]\d{9}$/;
        if (regx.test(entity)) {
          return true;
        }
        break;

      case 2:
        var regx = /^\d{2}$/;
        if (regx.test(entity)) {
          return true;
        }
        break;

      case 6:
        var regx = /^[8]\d{5}$/;
        if (regx.test(entity)) {
          return true;
        }
        break;
    }
    return false;
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    setLoading(true);
    console.log(
      "Submitting with ",
      phoneRef.current.value,
      ageRef.current.value,
      pincodeRef.current.value
    );

    if (!isValid(10, phoneRef.current.value)) {
      alert("Phone number is Invalid");
      setLoading(false);
      return;
    }
    if (!isValid(2, ageRef.current.value)) {
      setLoading(false);
      alert("Please enter valid age");
      return;
    }
    if (!isValid(6, pincodeRef.current.value)) {
      setLoading(false);
      alert("Please enter valid pincode. Currently we only support Bihar");
      return;
    }
    const config = {
      method: "post",
      url: `https://cowinnotifierwa.herokuapp.com/user`,
      data: {
        phone: phoneRef.current.value,
        age: ageRef.current.value,
        pincode: pincodeRef.current.value,
      },
    };

    axios(config)
      .then(function (res) {
        if (res.status == 200) {
          phoneRef.current.value = "";
          ageRef.current.value = "";
          pincodeRef.current.value = "";
          if (res.data.status === "success") {
            alert(
              "Your Request has been submitted. We will notify you instantly for the slots"
            );
            setLoading(false);
            return;
          } else if (res.data.message.indexOf("E11000") > -1) {
            alert("We already have your record. Stay safe! we will notify you");
            setLoading(false);
            return;
          }
        }

        alert(
          `Your request didn't go through. We may be little overloaded. Please try again`
        );
        setLoading(false);
        return;
      })
      .catch((e) => {
        setLoading(false);
        alert(`Your request failed! we may be overloaded. Please try again`);
      });
  };

  return (
    <>
      <form>
        <h1>Get instant Alerts for Vaccination slots</h1>
        <input
          disabled={loading}
          placeholder="Whatsapp Number"
          type="tel"
          maxLength="10"
          ref={phoneRef}
        ></input>
        <input
          disabled={loading}
          placeholder="Age"
          type="tel"
          maxLength="2"
          minLength="2"
          ref={ageRef}
        ></input>
        <input
          disabled={loading}
          placeholder="Pincode"
          type="tel"
          maxLength="6"
          ref={pincodeRef}
        ></input>
        <button disabled={loading} onClick={handleSubmit}>
          {loading ? (
            <BeatLoader size={6} marin={1} color={"#017DB7"} />
          ) : (
            "Submit"
          )}
        </button>
      </form>

      <a href="https://twitter.com/manigedit" target="_blank">
        <i className="fa fa-twitter"></i>Follow Me
      </a>

      <link
        rel="stylesheet"
        href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
      ></link>
      <link
        href="https://fonts.googleapis.com/css?family=Roboto:400"
        rel="stylesheet"
        type="text/css"
      ></link>
    </>
  );
}