RC UI

Install

package.json

npm i @ringcentral-integration/rcui
// or
yarn add @ringcentral-integration/rcui

Basic Using

All components we using need contain in the RcThemeProvider.

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

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

Custom Theme

You can custom theme by theme props with RcThemeInput object like below, all of option you can see type RcThemeInput;

const defaultTheme: RcThemeInput = {
  palette: {
    primary: {
      main: '#0684bd',
    },
    ...
  },
};

const App = (props) => {
  return (
    <RcThemeProvider theme={theme}>
      <RcCircularProgress />
    </RcThemeProvider>
  );
};

Using Icons

We can using any component with symbol props, using react-svg-loader to load svg as component.

There are some svg under this folder, you can import from '@ringcentral-integration/rcui/icons/, using like below.

import phoneSvg from '@ringcentral-integration/rcui/icons/icon-phone.svg';

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