trendingtechnology / juno

Ringcentral React Component library, make your app have the same user experience as Ringcentral Apps.

Juno

Ringcentral React Component library, make your app have the same user experience as Ringcentral Apps.

base on MATERIAL-UI.

Explore Juno with the interactive live Storybook instance.

View in Codesandbox Example.

Install

npm i @ringcentral/juno styled-components
// or
yarn add @ringcentral/juno styled-components

Quick Start

All components we using need contain in the RcThemeProvider.

import {
  RcAvatar,
  RcTooltip,
  RcButton,
  RcIcon,
  RcLink,
  RcCircularProgress,
  RcThemeProvider,
} from '@ringcentral/juno';

<RcThemeProvider>
  <RcAvatar color="lake">SH</RcAvatar>
  <RcButton>Button</RcButton>
  <RcLink>LINK</RcLink>
  <RcCircularProgress />
  <RcCircularProgress size="{30}" color="secondary" />
</RcThemeProvider>

Use DatePicker

if you use RcDatePicker, we calculate time depend on moment.js you should install moment

npm i moment
// or
yarn add moment

Use Juno Icon

We can use any component with RcIcon prop symbol, pass component into symbol that will render svg icon with our RcIcon style.

import { RcIcon } from '@ringcentral/juno';

import { Phone } from '@ringcentral/juno/icon';

const App = (props) => {
  return (
    <RcThemeProvider>
      <RcIcon symbol={Phone} />
    </RcThemeProvider>
  );
};