react-bootstrap#Stack JavaScript Examples

The following examples show how to use react-bootstrap#Stack. 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: ipfs.js From RC4Community with Apache License 2.0

6 votes

Copy = ({ cid }) => {
  const [isCopied, setIsCopied] = useState(false);

  async function copyTextToClipboard(text) {
    if ("clipboard" in navigator) {
      return await navigator.clipboard.writeText(text);
    } else {
      return document.execCommand("copy", true, text);
    }
  }

  const handleCopyClick = () => {
    copyTextToClipboard(cid)
      .then(() => {
        setIsCopied(true);
        setTimeout(() => {
          setIsCopied(false);
        }, 1500);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  return (
    <Stack gap={2} direction="horizontal">
      <Button disabled variant="outline-dark">
        {cid.substr(0, 5)}...{cid.substr(cid.length - 5, cid.length)}
      </Button>
      <Button variant="outline-dark" onClick={handleCopyClick}>
        {isCopied ? "Copied" : "Copy"}
      </Button>
    </Stack>
  );
}

Example #2

Source File: formdemo.js From RC4Community with Apache License 2.0

6 votes

function FormDemo() {
  return (
    <div>
      <Head>
        <title>Form</title>
        <meta name="description" content="Rocket.Chat form tool demo" />
        <link rel="icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <Stack className="mx-auto">
        <h1 className="mx-auto mt-3">Preview of Form Component</h1>
        <Stack direction="horizontal">
          <RCform formId={1} fw={"40%"} />
          <RCform formId={2} fw={"50%"} />
        </Stack>
        <Stack direction="horizontal">
          <RCform formId={3} fw={"50%"} />
          <RCform formId={4} fw={"40%"} />
        </Stack>
        <Stack direction="horizontal">
          <RCform formId={5} fw={"50%"} />
        </Stack>
      </Stack>
    </div>
  );
}

Example #3

Source File: ipfsDemo.js From RC4Community with Apache License 2.0

6 votes

function IPFSdemo() {
  return (
    <div>
      <Head>
        <title>Form</title>
        <meta name="description" content="Rocket.Chat ipfs tool demo" />
        <link rel="icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <Stack className="mx-auto">
        <h1 className="mx-auto mt-3">
          Preview of Peer-to-Peer Sharing IPFS Component
        </h1>
        <IpfsAdder showText={"IPFS Add"} />
      </Stack>
    </div>
  );
}

Example #4

Source File: walletDemo.js From RC4Community with Apache License 2.0

6 votes

function WalletDemo() {
  return (
    <div>
      <Head>
        <title>Ether Wallet</title>
        <meta name="description" content="Rocket.Chat MetaMask connect demo" />
        <link rel="icon" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <Stack direction="horizontal" className={styles.demo}>
        <Meta />
        <NFTProfile limit={20}/>
      </Stack>
    </div>
  );
}

Example #5

Source File: ipfs.js From RC4Community with Apache License 2.0

5 votes

IpfsAdder = ({ showText }) => {
  const [fileUrl, updateFileUrl] = useState(``);
  const [cid, setCID] = useState("");
  const [adding, setAdding] = useState(false);

  const hiddenInput = useRef(null);

  const getIPFS = async (e) => {
    try {
      setAdding(true);
      const file = e.target.files[0];

      const ipfs = await IPFS.create({ repo: "ok" + Math.random() });

      console.log("ipfs", ipfs);
      const { cid } = await ipfs.add(file);
      const url = `https://ipfs.io/ipfs/${cid.toString()}`;
      updateFileUrl(url);

      setCID(cid.toString());
      setAdding(false);
    } catch (e) {
      setAdding(false);
      console.error("An error occurred while uploading media", e);
    }
  };

  const handleInputClick = (event) => {
    hiddenInput.current.click();
  };

  return (
    <div className="mx-auto">
      <Stack direction="vertical" gap={2}>
        <Stack direction="horizontal" gap={2}>
          <Button disabled={adding} onClick={handleInputClick}>
            {adding ? (
              <Spinner
                as="span"
                animation="border"
                size="sm"
                role="status"
                aria-hidden="true"
              />
            ) : (
              showText
            )}
          </Button>
          <input
            type="file"
            style={{ display: "none" }}
            ref={hiddenInput}
            accept="image/*"
            capture="camera"
            onChange={getIPFS}
          />
          {cid && <Copy cid={cid} />}
        </Stack>

        {fileUrl && <PreviewImage srcUrl={fileUrl} />}
      </Stack>
    </div>
  );
}