react-device-detect#MobileOnlyView JavaScript Examples

The following examples show how to use react-device-detect#MobileOnlyView. 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: home.jsx From codeinterview-frontend with Apache License 2.0

4 votes

Home = () => {
  const roomService = getRoomService();
  let clicked = false;
  toast.info(
    `Hi! I'm currently hosting the backend for this site on Heroku and AWS free tiers so you might experience some failed requests and errors from time to time due to max connection limits. Sorry for being broke. (T▽T) Enjoy!`,
    { position: 'bottom-right', autoClose: false }
  );
  return (
    <Container fluid className="p-4 wrapper text-center">
      <Row className="d-flex flex-column justify-content-center">
        <Card className="p-4 align-self-center mt-4 text-center welcome-card">
          <Card.Body>
            <Card.Title as="h3">Welcome to CodeInterview!</Card.Title>
            <Card.Text>
              CodeInterview is a home made solution and personal
              self-learning project for online coding interviews by{' '}
              <a
                href="https://github.com/areebbeigh"
                target="_blank"
                rel="noopener noreferrer"
              >
                @areebbeigh
              </a>
              . No sign-ups, just create a room and share the URL.
              <br />
              You can also check it out on{' '}
              <a
                href="https://github.com/areebbeigh/codeinterview-backend"
                target="_blank"
                rel="noopener noreferrer"
              >
                GitHub
              </a>
              .
            </Card.Text>
          </Card.Body>
        </Card>
      </Row>
      <Row className="d-flex flex-column justify-content-center">
        <img
          className="demo-image align-self-center"
          src={DemoImage}
          alt="demo"
        />

        <Button
          className="align-self-center mb-4 p-2"
          size="sm"
          variant="primary"
          href="#"
          onClick={() => {
            if (clicked) return;
            clicked = true;
            toast.dark('Creating new room...');
            roomService
              .createNewRoom()
              .then(room => {
                toast.dark('Redirecting...');
                window.location.href = `/room/${room.data.room_id}`;
              })
              .catch(err => {
                toast.error(
                  `Failed to create new room: ${err.message}`
                );
                clicked = false;
              });
          }}
        >
          Try It Out!
        </Button>
        <Button
          className="align-self-center p-2"
          size="sm"
          variant="light"
          href="https://donorbox.org/donate-to-codeinterview?default_interval=o"
          target="_blank"
        >
          <FontAwesomeIcon icon={faHeart} /> Donate
        </Button>
      </Row>
      <MobileOnlyView>
        <Dialog
          ref={dialog => {
            dialog.show({
              body: `Hey. CodeInterview works best on desktops. Head on to your desktop browser. I'll wait :)`,
              actions: [Dialog.OKAction()],
              onHide: () => null,
            });
          }}
        />
      </MobileOnlyView>
    </Container>
  );
}