Skip to content

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

License

Notifications You must be signed in to change notification settings

ringcentral/juno

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Juno

Static Badge NPM version

Static Badge NPM version

Static Badge Static Badge Static Badge

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.

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