https://github.com/rdmurphy/spring-board-element
A custom element that aims to make it easier to embed Spring '83 boards
https://github.com/rdmurphy/spring-board-element
Last synced: about 1 year ago
JSON representation
A custom element that aims to make it easier to embed Spring '83 boards
- Host: GitHub
- URL: https://github.com/rdmurphy/spring-board-element
- Owner: rdmurphy
- License: mit
- Created: 2022-07-01T05:47:22.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-07-15T03:41:28.000Z (almost 4 years ago)
- Last Synced: 2025-03-26T13:38:21.250Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 33.2 KB
- Stars: 14
- Watchers: 3
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `` element
A custom element that makes it simple to embed [Spring '83 boards](https://github.com/robinsloan/spring-83)!
## Usage
If you are using `` in a client-side framework you'll likely want to install it via [npm](https://www.npmjs.com/), [Yarn](https://yarnpkg.com/) or [pnpm](https://pnpm.js.org/).
```sh
npm install spring-board-element
# or
yarn add spring-board-element
# or
pnpm install spring-board-element
```
Then in your bundle, import the element:
```js
import 'spring-board-element';
```
However, a simple `` tag will also work! A UMD build is available via [unpkg.com](https://unpkg.com/) or any other CDN.
```html
<head>
<!-- Import the element -->
<script type="module" src="https://unpkg.com/spring-board-element">
```
## Attributes
`` has one optional attribute:
- `href`: The URL of the board to embed. When this is changed a new board will be loaded.
## Properties
`` has three properties:
- `href`: The URL of the board to embed. Used to get or set the board URL.
- `loaded`: A pending `Promise` that resolves when the board has loaded. Each time the `href` property is changed the `loaded` property will reference a new `Promise`.
- `pubdate`: A `Date` object representing the date and time the board was published. This is retrieved from the board's `
```js
const board = document.querySelector('spring-board');
board.href = 'https://bogbody.biz/1...';
board.loaded.then(() => {
// board has loaded
});
board.href = 'https://bogbody.biz/2...';
board.loaded.then(() => {
// new board has loaded
});
```
## LICENSE
MIT