@kyc-ui/react
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.4 • Public • Published

    KYCUI is Kyc's design system. It contains foundations, voice and tone guidelines, component standards, and other guidelines that systematically improve quality, timeliness, and consistency to our product.

    KYC UI is an implementation of KYCUI using the React framework. It is the true implementation of KYCUI in raw code form, designed to communicate with users and bring delightful experiences. KYC UI is the designation for KYCUI React components.


    Usage

    Prerequisites

    KYC UI based on material-ui. So, you don't need to install @mui/material.

    # yarn
    $ yarn add @kyc-ui/react
    # npm
    $ npm install --save @kyc-ui/react

    But if you need to use @mui/lab, you have to install @mui/material first. The lab has a peer dependency on the core components.

    SVG Icons

    We use prebuilt SVG Material icons. You can install @mui/icons-material using this command,

    # yarn
    $ yarn add @mui/icons-material
    # npm
    $ npm install --save @mui/icons-material

    If you would like to use additional styles for KycProvider, add the disableInjection prop to KycProvider and add your custom styles as follows.

    import { css } from '@emotion/css';
    import { KycProvider, injectGlobalStyles } from '@kyc-ui/react';
    const styles = css`
      [data-reach-tooltip] {
        z-index: 1;
        pointer-events: none;
        position: absolute;
        padding: 0.25em 0.5em;
        box-shadow: 2px 2px 10px hsla(0, 0%, 0%, 0.1);
        white-space: nowrap;
        font-size: 85%;
        background: #f0f0f0;
        color: #444;
        border: solid 1px #ccc;
      }
    `;
    const { inputGlobalStyles } = injectGlobalStyles(styles);
    export default function MyApp({ children }) {
      return (
        <KycProvider disableInjection>
          {inputGlobalStyles}
          {children}
        </KycProvider>
      );
    }

    Once you've applied the provider, you can use KYC UI components in your app. See the example below.

    Example

    Kyc UI is built in React, with styling done in emotion. To use these components, import them as follows:

    // Example for `<Button />` component.
    import * as React from 'react';
    import { Button } from '@kyc-ui/react';
    export default function Component() {
      return <Button>Push Me</Button>;
    }

    Read the Storybook for more examples.

    License

    All packages in this repoare released under the Apache 2.0 license. Please note that some packages (like our fonts package) may contain third-party materials with different licences. Any third-party acknowledgements are outlined on the "Credits" section on each package's README.

    Copyright (c) 2021 Know Your Custome Limited. All rights reserved.

    Maintainers

    Keywords

    none

    Install

    npm i @kyc-ui/react

    DownloadsWeekly Downloads

    11

    Version

    0.2.4

    License

    Apache-2.0

    Unpacked Size

    149 kB

    Total Files

    64

    Last publish

    Collaborators

    • hhusam