# sheet-best-templates

> Connect SpreadSheets to your HTML

Latest version **0.1.0** (published 2019-08-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install sheet-best-templates
pnpm add sheet-best-templates
yarn add sheet-best-templates
bun add sheet-best-templates
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: no vulnerabilities; high maintenance score.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2019-08-15 |
| First published | 2019-08-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 69.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | 0soft |
| Maintainers | nihey |
| Keywords | template, html, spreadsheet |

## Links

- npm: https://www.npmjs.com/package/sheet-best-templates
- Repository: https://github.com/0soft/sheet-best-templates
- Homepage: https://github.com/0soft/sheet-best-templates#readme
- Issues: https://github.com/0soft/sheet-best-templates/issues
- npm.io page: https://npm.io/package/sheet-best-templates

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2019-08-15
- 0.0.0 — 2019-08-14

## README

# SheetBest Templates

[![Build Status](https://travis-ci.org/0soft/sheet-best-templates.svg?branch=master)](https://travis-ci.org/0soft/sheet-best-templates)
[![Coverage Status](https://coveralls.io/repos/github/0soft/sheet-best-templates/badge.svg?branch=master)](https://coveralls.io/github/0soft/sheet-best-templates?branch=master)

Connect Google Sheets to your HTML

With SheetBest Templates you'll be able to:

-  Use SpreadSheet data to display data on your HTML template
-  Insert data from a HTML `<form>` to a SpreadSheet

## Usage

This project requires you to setup a Google Sheet API at [SheetBest](https://sheet.best).
When you get yours get back here (it looks like this: https://sheet.best/api/sheet/cf969697-682a-40e3-bad4-d54803eeeacf).
We will use it on the next steps.


Add this snippet to your HTML page:

```html
<script src="https://sbt.0soft.dev/sheet-best-templates.min.js"></script>
```

Then follow the instructions on for the operation that you want to do:

## Display Data

To display data you just need to add `data-sheet-best` attribute to your HTML
tag:

```html
<div data-sheet-best="https://sheet.best/api/sheet/cf969697-682a-40e3-bad4-d54803eeeacf"></div>
```

Then you just need to use `{{  }}` templates, they will be replaced
by the content on your SpreadSheet API

```html
<div data-sheet-best="https://sheet.best/api/sheet/cf969697-682a-40e3-bad4-d54803eeeacf">
  <div>
    <h2>{{ code }}</h2>
    <div>
      <span>Price: <b>{{ price }}</b></span>
      <span>High: <b>{{ high }}</b></span>
      <span>Low: <b>{{ low }}</b></span>
    </div>
  </div>
</div>
```

A Google Sheet like this:

<img src="https://raw.githubusercontent.com/0soft/sheet-best-templates/master/assets/images/read-example.png" />

Will generate a HTML code like this:

```html
<div data-sheet-best="https://sheet.best/api/sheet/cf969697-682a-40e3-bad4-d54803eeeacf">
  <div>
    <h2>COST</h2>
    <div>
      <span>Price: <b>273.59</b></span>
      <span>High: <b>275.36</b></span>
      <span>Low: <b>272.76</b></span>
    </div>
  </div>

  <!-- ...and so on, until... -->

  <div>
    <h2>TSLA</h2>
    <div>
      <span>Price: <b>229.31</b></span>
      <span>High: <b>231.5</b></span>
      <span>Low: <b>228.03</b></span>
    </div>
  </div>
</div>
```

## Inserting Data

To display data you just need to add `data-sheet-best` attribute to a `<form>`
tag. If your spreadsheet is setup like this:

```html
<form data-sheet-best="https://sheet.best/api/sheet/cf969697-682a-40e3-bad4-d54803eeeacf">
  <input type="text" name="name"/>
  <input type="text" name="email"/>
  <button type="submit">submit</button>
</form>
```

We will automatically add the information on your SpreadSheet once the user
submits the content:

<img src="https://raw.githubusercontent.com/0soft/sheet-best-templates/master/assets/images/write-example.png" />

## License

The files included in this repository are licensed under the MIT license.

---
_Source: https://npm.io/package/sheet-best-templates · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._