browser-database

Overview

This package wraps the idb npm package in a web component built using StencilJS. The browser-database component can be used in any major JS framework or vanilla JS to enable easy access to the browser's IndexDB. The component handles the database configuration, providing a simple interface for integrating one or more browser databases into a website.

Installation

Implementation

To use this component, add the custom element to your HTML or JSX:

<browser-database />

customElements.whenDefined('browser-database')

Properties

| Property | Attribute | Description | Type | Default | | -------------- | --------------- | ---------------------------------------------------------------------- | --------- | --------------------------------- | | accept | accept | String of comma-separated file types. All types allowed by default | string | '' | | dbName | db-name | Name of the database | string | 'file-store-database' | | dbStoreName | db-store-name | Name of the database store | string | 'file-store' | | geotag | geotag | If true, geolocation info for files will be saved in the file manifest | boolean | false | | icon | icon | Materialize icon to use for the component if visible | string | 'folder' | | manifestName | manifest-name | Name of the manifest that tracks file metadata | string | 'delicious-file-store-manifest' | | theme | theme | Sets dark or light theme | string | 'dark' | | timetag | timetag | If true, a timestamp for files will be saved in the file manifest | boolean | false | | visible | visible | Determines visibility of component | boolean | false |

Events

| Event | Description | Type | | ------------- | ----------- | ------------------------------ | | modalClosed | | CustomEvent<BrowserDatabase> | | modalOpened | | CustomEvent<BrowserDatabase> |

Methods

close() => Promise<void>

Returns

Type: Promise<void>

delete(key: any) => Promise<any>

Returns

Type: Promise<any>

deleteDatabase() => Promise<boolean>

Returns

Type: Promise<boolean>

get(key: any) => Promise<any>

Returns

Type: Promise<any>

getManifest() => Promise<any>

Returns

Type: Promise<any>

keys() => Promise<any>

Returns

Type: Promise<any>

open() => Promise<void>

Returns

Type: Promise<void>

set(key: any, val: any) => Promise<any>

Returns

Type: Promise<any>

Dependencies

Depends on

• file-input

Graph

graph TD;
  browser-database --> file-input
  style browser-database fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS