README.md

SLT's component library

master	develop

slt-ui is a high performance, asynchronous, component library that is compatible with legacy systems, for more details on that, see our main README.

To use it in your project, just do:

yarn add @sur-la-table/slt-ui

Then you can grab any component using:

import { Button } from '@sur-la-table/slt-ui';

This includes Material UI components and also slt-ui components.

For injecting into a legacy system, use React Habitat's syntax:

<div data-component="Card">
    <div data-component="Button">Yo</div>
</div>

To register these components with Habitat, run:

ComponentManifest.bootstrapper.update();

Note that this differs from React Habitat's method (window.updateHabitat();). Both are functionally the same, but we expose the low level bootstrapper to have access to more of Habitat's internal methods.

Also, unlike vanilla React Habitat you can have nested components.

Dynamically registering components:

First build the component:

yarn build dynamic-registration ./src/--REPLACE_WITH_COMPONENT_DIRECTORY--/index.js

Then in your frontend environment:

var slt_dynamic_registration = function(e){var t={};function n(r) ...
$('<div data-component="TestButton">This is a test button</div>').prependTo('body');
ComponentManifest.register(slt_dynamic_registration);