components.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="theme-color" content="#ff4e6a" />
    <title>Nano JSX &bull; Built-In Components</title>
    <link rel="manifest" href="/manifest.webmanifest" />
    <link rel="stylesheet" href="/css/style.css?ver=0.0.7" />
    <link rel="prefetch" href="/" as="document" />
    <link rel="prefetch" href="/docs.html" as="document" />
    <link rel="prefetch" href="/examples.html" as="document" />
  </head>
  <body>
    <div id="root">
      <header style="padding-bottom: 0px; margin-bottom: -24px">
        <div class="is-center">
          <img id="logo" width="202" height="77" src="/img/logo-compressed.svg" alt="nano jsx logo" />
        </div>
        <div id="other-navigation" class="is-center">
          <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/docs.html">Docs</a></li>
            <li><a href="/components.html">Components</a></li>
            <li><a href="/examples.html">Examples</a></li>
            <li><a href="/ui.html">UI</a></li>
            <li>
              <a href="https://github.com/nanojsx/nano/discussions" target="_blank" rel="noopener">Discussions</a>
            </li>
          </ul>
        </div>
      </header>
      <script>
        // underline active navigation element
        const { pathname } = window.location
        const list = document.getElementById('other-navigation').children[0].children
        for (let i = 0; i < list.length; i++) {
          const a = list[i].children[0]
          const href = a.getAttribute('href')
          if (href === pathname) a.classList.add('active')
        }
      </script>

      <section>
        <h1>Built-In Components</h1>
        <p>
          Nano JSX does provide some useful lightweight build-in components.<br />You will find their
          <a href="https://github.com/nanojsx/nano/tree/master/src/components">source code here</a> and some examples on
          how to use these component in the <a href="https://nanojsx.github.io/examples.html">examples section</a>.
        </p>
        <ul class="dot-list">
          <li><a href="#helmet">Helmet</a></li>
          <li><a href="#img">Img</a></li>
          <li><a href="#router">Router</a></li>
          <li><a href="#suspense">Suspense </a></li>
          <li><a href="#link">Link</a></li>
          <li><a href="#visible">Visible </a></li>
        </ul>

        <h2 id="helmet">&lt;Helmet /&gt;</h2>
        <p>Works just like react-helmet. Works client-side and SSR.</p>
        <pre><code id="Helmet" class="language-tsx">loading...</code></pre>

        <h2 id="img">&lt;Img /&gt;</h2>
        <p>Lazy Loading Images. You should add a height and width if possible.</p>
        <pre><code id="Img" class="language-tsx">loading...</code></pre>

        <h2 id="router">&lt;Router /&gt;</h2>
        <p>A isomorphic router is included.</p>
        <pre><code id="Router" class="language-tsx">loading...</code></pre>

        <div class="alert alert-notice">
          <p><strong>Problem:</strong></p>

          <ul class="dot-list">
            <li>&lt;Switch /&gt; will only trigger a re-render if the &lt;Route /&gt; component changes.</li>
            <li>
              If &lt;Route /&gt; has a dynamic path like &lt;Route exact path="/blog/:id"&gt; and the user navigates
              from /blog/584' to '/blog/219', &lt;Switch /&gt; will NOT trigger a re-render and the user will never see
              '/blog/219'.
            </li>
          </ul>

          <p>
            <strong>Solution:</strong>
            <p>
              You can use the <b>Router Listener</b> inside &lt;Blog /&gt; to listen for route changes.
              This will allow you to fetch the new blog post (based on the new id in "/blog/:id") and update the
              component.<br />(see example below and <a href="https://youtu.be/eUBuFORqPdo">this video</a>)
            </p>
          </p>
        </div>
        <h3>Router Listener</h3>
        <pre><code id="RouterListener" class="language-tsx">loading...</code></pre>

        <h2 id="suspense">&lt;Suspense /&gt;</h2>
        <p>
          Use Suspense for async fetching resources from your server. Add <code class="is-code">cache</code> if you want
          to cache the result of the promise.<br />Check
          <a href="https://nanojsx.github.io/examples.html">the examples</a> to see it in action.
        </p>
        <pre><code id="Suspense" class="language-tsx">loading...</code></pre>

        <h2 id="link">&lt;Link /&gt;</h2>
        <p>Nano JSX provides a fancy <b>Link Component</b> for prefetching pages.</p>
        <pre><code id="Link" class="language-tsx">loading...</code></pre>

        <h2 id="visible">&lt;Visible /&gt;</h2>
        <p>
          This children of Visible will only be rendered and added to the dom, if they are visible. This is useful, for
          example, for a comment section. The root elements of Visible needs to be DOM element or a Fragment with at
          least one DOM node as direct child.
        </p>
        <pre><code id="Visible" class="language-tsx">loading...</code></pre>
      </section>

      <footer class="is-full-width has-background-light">
        <div class="is-container is-center">
          <div style="margin-bottom: 16px">
            <a style="color: black" href="https://github.com/nanojsx/nano">https://github.com/nanojsx/nano</a>
          </div>
          <div>
            <a
              class="github-button"
              href="https://github.com/yandeu"
              data-color-scheme="no-preference: dark; light: dark; dark: dark;"
              data-size="large"
              data-show-count="true"
              aria-label="Follow @yandeu on GitHub"
              >Follow @yandeu</a
            >
            <a
              class="github-button"
              href="https://github.com/nanojsx/nano"
              data-color-scheme="no-preference: dark; light: dark; dark: dark;"
              data-icon="octicon-star"
              data-size="large"
              data-show-count="true"
              aria-label="Star nanojsx/nano on GitHub"
              >Star</a
            >
            <a
              class="github-button"
              href="https://github.com/sponsors/yandeu"
              data-color-scheme="no-preference: dark; light: dark; dark: dark;"
              data-icon="octicon-heart"
              data-size="large"
              aria-label="Sponsor @yandeu on GitHub"
              >Sponsor</a
            >
          </div>
          <div>
            <br />
            <a href="https://github.com/nanojsx/nano/discussions" target="_blank" rel="noopener"
              ><img loading="lazy" src="https://shields.io/badge/GitHub-%20Discussions-%237289da?logo=github" alt="GitHub Discussions"
            /></a>
            <a href="https://discord.gg/96PGJeB8xf" target="_blank" rel="noopener"
              ><img
                loading="lazy" src="https://img.shields.io/discord/912874504877912075?color=%237289da&label=Discord&logo=discord&logoColor=%23fff"
                alt="Join our discord server!"
            /></a>
          </div>
        </div>
      </footer>
    </div>

    <!-- github corner -->
    <a href="https://github.com/nanojsx/nano" class="github-corner" aria-label="View source on GitHub">
      <svg
        width="80"
        height="80"
        viewBox="0 0 250 250"
        style="fill: #151513; color: #fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1)"
        aria-hidden="true"
      >
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
        <path
          d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
          fill="currentColor"
          style="transform-origin: 130px 106px"
          class="octo-arm"
        ></path>
        <path
          d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
          fill="currentColor"
          class="octo-body"
        ></path>
      </svg>
      <style>
        .github-corner:hover .octo-arm {
          animation: octocat-wave 560ms ease-in-out;
        }
        @keyframes octocat-wave {
          0%,
          100% {
            transform: rotate(0);
          }
          20%,
          60% {
            transform: rotate(-25deg);
          }
          40%,
          80% {
            transform: rotate(10deg);
          }
        }
        @media (max-width: 500px) {
          .github-corner:hover .octo-arm {
            animation: none;
          }
          .github-corner .octo-arm {
            animation: octocat-wave 560ms ease-in-out;
          }
        }
      </style>
    </a>

    <!-- prism scripts -->
    <link rel="stylesheet" href="./css/prism.css?ver=0.0.5" />
    <script src="./js/prism.js?ver=0.0.5"></script>
    <script src="./js/code-components.js?ver=0.0.5"></script>
    <script>
      window.addEventListener('load', event => {
        for (const [key, value] of Object.entries(code)) {
          setTimeout(() => {
            document.getElementById(key).innerHTML = Prism.highlight(value, Prism.languages.tsx)
          }, 0)
        }
      })
    </script>

    <!-- github buttons -->
    <script async defer src="https://buttons.github.io/buttons.js"></script>
  </body>
</html>