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>
  );
};

GitHub

https://github.com/ringcentral/juno