TinyBase logoTinyBase

Importing TinyBase

This guide provides a quick aside about importing TinyBase into your application.

Targets and formats

The overall package includes a number of different versions of TinyBase, transpiled for different targets and formats. You'll find them all in the ./lib folder of the package, and you can directly import them as follows:

DirectoryTargetFormatMinifiedImport
libesnextesmyesimport {...} from tinybase
lib/debugesnextesmnoimport {...} from tinybase/debug
lib/umdesnextumdyesimport {...} from tinybase/umd
lib/cjsesnextcjsyesimport {...} from tinybase/cjs
lib/es6es6esmyesimport {...} from tinybase/es6
lib/umd-es6es6umdyesimport {...} from tinybase/umd-es6
lib/cjs-es6es6cjsyesimport {...} from tinybase/cjs-es6

Using TinyBase submodules

The tinybase module is the master package of all the functionality together (except the ui-react module and tools module, which always remain standalone options). Since many of the submodules share compiled-in dependencies, the master package is smaller to include than including all of the submodules separately.

However, for a very minimal set of submodules, you may save size by including them piecemeal. If you only wanted a Store and a Metrics object, for example, you could import them alone like this:

import {createStore} from 'tinybase/store';
import {createMetrics} from 'tinybase/metrics';
// ...

You can also import single packages in other targets and formats. For example:

import {createStore} from 'tinybase/es6/store';
import {createMetrics} from 'tinybase/es6/metrics';
import {useCell} from 'tinybase/es6/ui-react';
// ...

React Native

If you are using React Native - for example with Expo - be aware that the Metro bundler does not currently support module resolution very well. You may have to add in the lib portion of the path to be explicit about your imports:

import {createStore} from 'tinybase/lib';
import {useCell} from 'tinybase/lib/ui-react';

OK, enough with the import shenanigans. Let's briefly look at how TinyBase benefits from using TypeScript to improve your developer experience in the TinyBase and TypeScript guide.