@smore/async-content

Web components for asynchronously rendering HTML content. Use them with any framework, or no framework at all!

Usage

Minimal example

<async-content src="docs/hello-world.html">
  <async-placeholder> <pre> Loading... </pre> </async-placeholder>
  <async-error> <pre> An error occured! </pre> </async-error>
</async-content>

Better Placeholder/Error rendering

<async-content src="docs/hello-world.html">
  <async-placeholder component="my-spinner" />
  <async-error errorRender={({ status, message }) => {
    return [
      <h1> Oops, { status } Error</h1>
      <p> { message } </p>
    ]
  }} />
</async-content>

Documentation

<async-content> <async-placeholder> <async-error>

Installation

Script tag

• Put a script tag similar to this <script src='https://unpkg.com/@smore/async-content@0.2.0/dist/async-content.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install @smore/async-content --save
• Put a script tag similar to this <script src='node_modules/@smore/async-content/dist/async-content.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install @smore/async-content --save
• Add an import to the npm packages import '@smore/async-content';
• Then you can use the element anywhere in your template, JSX, html etc