Juno

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

Explore Juno with the interactive live Storybook instance.

Install

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

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