RingCentral React Component library, make your app have the same user experience as RingCentral Apps.
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.
npm i @ringcentral/juno @ringcentral/juno-icon styled-components dayjs
// or
yarn add @ringcentral/juno @ringcentral/juno-icon styled-components dayjs
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>
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>
);
};