@operational/blocks
TypeScript icon, indicating that this package has built-in type declarations

0.1.2 • Public • Published

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.

Readme

Keywords

none

Package Sidebar

Install

npm i @operational/blocks

Weekly Downloads

0

Version

0.1.2

License

MIT

Unpacked Size

22.1 kB

Total Files

15

Last publish

Collaborators

  • mpotomin
  • tejaskumar
  • the-other-tejas
  • fabien0102
  • imogenf
  • contiamo-bot