@operational/blocks

Opinionated composed ui components

Stats

StarsIssuesVersionUpdatedCreatedSize
@operational/blocks
265380.1.23 years ago4 years agoMinified + gzip package size for @operational/blocks in KB

Readme

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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.