@authenticins/react-ui

Authentic React UI

React component and theming library for Authentic Insurance interfaces.

Installation

npm install @authenticins/react-ui

Usage

import {
  AuthenticClientProvider,
  ThemeProvider,
  Box,
  Text,
  Button,
} from "@authenticins/react-ui";
import "@authenticins/react-ui/dist/style.css";

function App() {
  return (
    {/* Optional client provider */}
    <AuthenticClientProvider
      apiUrl="{{AUTHENTIC_API_URL}}"
      authConfig={{
        awsRegion: "{{YOUR_AWS_REGION}}",
        awsIdentityPoolId: "{{YOUR_AWS_IDENTITY_POOL_ID}}",
        awsUserPoolId: "{{YOUR_AWS_USER_POOL_ID}}",
        awsUserPoolWebClientId: "{{YOUR_AWS_USER_POOL_WEB_CLIENT_ID}}",
      }}
    >
      {/* Theme provider for components */}
      <ThemeProvider
        overrides={{
          brand: {
            name: "Partner Name",
            logoUrls: {
              light: "https://www.partner-website.com/logo-white.png",
              dark: "https://www.partner-website.com/logo.png",
            },
            faviconUrl: "https://partner-website.com/favicon.ico",
          },
          primaryColor: "#000000",
          borderRadius: 4,
        }}
      >
        <Box centered column w="100vw" h="100vh">
          <Text variant="heading" mb={2}>Hello world</Text>
          <Button mt={1}>Click me</Button>
        </Box>
      </ThemeProvider>
    </AuthenticClientProvider>
  );
}