@open-condo/ui v2.19.1

@open-condo/ui

A set of React UI components for developing applications inside the condo ecosystem

Table of contents

Installation\ Usage\ Including styles\ Access theme colors\ Style-variables\ Hooks

Installation

To install package simply run the following command if you're using npm as your package manager:

npm i @open-condo/ui

or it's yarn alternative

yarn add @open-condo/ui

Usage

You can import needed component with its props directly from package entry point like this:

import { Button } from '@open-condo/ui'
import type { ButtonProps } from '@open-condo/ui'

Including styles

To apply the styles, import the css file from library dist into your project root component:

import '@open-condo/ui/dist/styles.min.css'

Access theme colors

You can also directly access to all our theme colors by specifying import sub path like this:

import { colors } from '@open-condo/ui/colors'
import type { ColorPalette } from '@open-condo/ui/colors'

Style variables

Style tokens are available for import as well:

• CSS Variables:

import '@open-condo/ui/style-vars/css'

• Less Variables

@import (reference) "@open-condo/ui/style-vars/less";

@import (reference) "@open-condo/ui/dist/style-vars/variables.less";

Hooks

Hooks can be imported as follows:

import { useBreakpoints, useContainerSize } from '@open-condo/ui/hooks';

• useBreakpoints - returns the breakpoint object and its current value. Breakpoint value becomes true if the window width is greater than or equal to the corresponding breakpoint. The name and width of the breakpoints:
  • MOBILE_SMALL (0px)
  • MOBILE_LARGE (360px)
  • TABLET_SMALL (480px)
  • TABLET_LARGE (768px)
  • DESKTOP_SMALL (992px)
  • DESKTOP_LARGE (1200px)

const breakpoints = useBreakpoints()

// window width >= 480px and < 992px
const isTablet = breakpoints.TABLET_SMALL && !breakpoints.DESKTOP_SMALL

• useContainerSize provides the dimensions of a specific container.

const [{ width, height }, setRef] = useContainerSize()

console.log(width, height)

return <div ref={setRef} />