Instances

Modules can be rendered with different instances, allowing a module to be reused many times in one screen while keeping it’s own state per instance.

Module Instances

There’s 3 ways to work with instances:

No instance, then the module will use the DEFAULT_INSTANCE_ID (“default”)

import Counter from "ui-kit/Counter/View"

const Counters = () => (
    <div>
        <Counter />
        ...
    </div>
)

Constant instance

import Counter from "ui-kit/Counter/View"

const Counters = () => (
    <div>
        <Counter instanceId="apples" />
        <Counter instanceId="oranges" />
        ...
    </div>
)

Dynamic instance

import Counter from "ui-kit/Counter/View"

const Counters = ({ instances = []}) => (
    <div>
    { 
      R.map(
        instance => <Counter instanceId={instance} />, 
        instances
      )

Note: The Counter component should be a connected component.

Edit this page on GitHub

Module Definition: Composition

Context: Create