@5ive-souls/controls

Usage

First you will need to add @5ive-souls/controls to your project.

npm install @5ive-souls/controls

To use a component, you first need to set a global theme. This can be done with either the FluentProvider within Fluent UI or with the FiveSoulsProvider. While the FluentProvider will work, it will not provide the 5ive-souls/controls with any responsive capabilities and the useDevice() hook will not function.

import React from "react";
import ReactDOM from "react-dom";
import { FiveSoulsProvider, Grid, Section, forestDark } from "@5ive-souls/controls";

ReactDOM.render(
  <FiveSoulsProvider theme={forestDark}>
    <Grid>
        <ColumnDefinition />
        <ColumnDefinition />
        <Section cellProps={{ column: 1}}>
            <span>Section content</span>
        </Section>
    </Grid>
  </FiveSoulsProvider>,
  document.getElementById('root'),
);

Documentation

Documentation is hosted at docs.