Operational UI Blocks

The @operational/blocks package builds on @operational/components, delivering larger, opinionated pieces of UI that handle a fair bit of their own state or side effects.

Getting Started

Install the package via npm or yarn:

npm install @operational/blocks @operational/components

It is likely you will be using blocks together with components, so we recommend installing them together.

Create your first Filter block-based application like so:

import React from "react"
import { Filter } from "@operational/blocks"
import { Input, ThemeProvider, operationalTheme } from "@operational/components"

const App = () => {
  <ThemeProvider theme={operationalTheme}>
    <Filter>
      <Input id="field-1" value="Value 1" />
      <Input id="field-2" value="Value 2" />
      <DatePicker id="field-3" start="01-01-2018" />
    </Filter>
  </ThemeProvider>
}

This component interacts smoothly with data input components from @operational/components to render a filter summary, and add the fields themselves into a modal. See more at the filter documentation page.

Documentation

Head to the blocks section of the documentation site to see what you can do with blocks.