Skip to main content

Usage

Basic Usage​

All Gravis exports are available as named imports via the respective package.

import { Button, Alert, Box } from '@gravis-os/ui'
import { printNumber } from '@gravis-os/utils'
tip

Refer to the MUI Docs if you are unable to find a component that you're looking for.

Key Concepts​

  1. Each component extends off the API of its corresponding Ant Design counterpart and is injected with MUI's sx prop which enables styling via emotion/jss and access to the global theme object. You may also find components extended with custom props.

Example of extending an Ant Design Divider component:

import React from 'react'
import { Divider as AntdDivider, DividerProps as AntdDividerProps } from 'antd'
import { withStyledTheme, ThemeInterface } from '../styles/withTheme'

export interface DividerProps extends AntdDividerProps, ThemeInterface {}

const StyledDivider = withStyledTheme(AntdDivider)()

const Divider: React.FC<DividerProps> = (props) => {
  return <StyledDivider {...props} />
}

export default Divider

  1. Gravis has several types of exports.

  2. Gravis is governed by a set of principles.

Example 1: Extending layout​

// DashboardLayout.tsx
import { DashboardTemplate } from '@gravis-os'

const DashboardLayout = () => {
    return (
        <DashboardTemplate leftAsideMenuItems={...}>
            ...
        </DashboardTemplate>
    )
}

Example 2: Extending core components​

// MyCard.tsx
import { Card, Typography } from '@gravis-os'

const MyCard = (props) => (
    <Card {...props}>
        <Typography variant="h4">Title</Typography>
    </Card>
)

Example 3: Extending types​

import { Alert, AlertProps } from '@gravis-os'

export interface MyAlertProps extends AlertProps {}

const MyAlert: React.FC<MyAlertProps> = (props) => (
    <Alert {...props}>
        ...
    </Alert>
)