TIDO

Getting Started

TIDO is provided as npm package. Please follow the steps below to include it for production:

Installation

npm
npm i tido

Integration

You can use the app in different scenarios, either as embedded bundle or as a React library.

Embedded Bundle

Add these two files to your application: tido.min.js and tido.min.css.

HTML:

index.html
<link href="/node_modules/tido/dist/tido.min.css" rel="stylesheet">
<script src="/node_modules/tido/dist/tido.min.js"></script>

or JS:


script.js
import 'tido/dist/tido.min.js'
import 'tido/dist/tido.min.css'

Add a container element to your application where TIDO can mount onto. Please make sure that this element has your desired dimensions and position.

index.html
<style>
  #app {
    height: 100vh;
    width: 100%;
  }
</style>

<div id="app"></div>

Create a new TIDO instance and provide optionally your TIDO configuration:

Code
<script>
  const tido = new Tido({
    rootCollections: ['https://example.com/textapi/collections/example']
  });
</script>

Full Example

Code
<!DOCTYPE html>
<html>
  <head>
    <title>TIDO</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, width=device-width" />
    <link href="/node_modules/tido/dist/tido.min.css" rel="stylesheet">
    <style>
      html, body {
        margin: 0;
      }
      #app {
        height: 100vh;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="app"></div>
    <script src="/node_modules/tido/dist/tido.min.js"></script>
    <script>
    const tido = new Tido({
      rootCollections: ['https://example.com/textapi/collections/example']
    });
  </script>
  </body>
</html>

React

Use TIDO directly inside your React application (e.g., SPA or Next.js) as a component:


Code
import { Tido } from 'tido'
import 'tido/dist/tido.min.css'

export default function TidoPage() {

  return <div className="container">
    <Tido config={} />
  </div>
}

On the next page, you can find a detailed explanation of the configuration object.

Introduction Configuration

Code

<!DOCTYPE html>
<html>
  <head>
    <title>TIDO</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, width=device-width" />
    <link href="/node_modules/tido/dist/tido.min.css" rel="stylesheet">
    <style>
      html, body {
        margin: 0;
      }
      #app {
        height: 100vh;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="app"></div>
    <script src="/node_modules/tido/dist/tido.min.js"></script>
    <script>
    const tido = new Tido({
      rootCollections: ['https://example.com/textapi/collections/example']
    });
  </script>
  </body>
</html>