@valkdigital/ui-kit

ui kit for Valk Digital

Usage no npm install needed!

<script type="module">
  import valkdigitalUiKit from 'https://cdn.skypack.dev/@valkdigital/ui-kit';
</script>

README

Valk Digital UI-kit

https://valkdigital.github.io/ui-kit

A fully typed component library for react native (web) development.

Setup

Instructions for using the library

Installation

Install this package in your React Native or React project.

npm install @valkdigital/ui-kit

or

yarn add @valkdigital/ui-kit

Font

This project uses Source Sans Pro. When you add a font to your project use the same names as the ones in the ./src/style/typography.ts file. When you set up an expo project you can use the Fonts enum like this:

import React from "react";
import { useFonts } from "expo-font";
import { Fonts } from "vex-ui";

export default function App() {
  const [loaded] = useFonts({
    [Fonts.Bold]: require("../assets/fonts/SourceSansPro-Bold.ttf"),
    [Fonts.Regular]: require("../assets/fonts/SourceSansPro-Regular.ttf"),
    [Fonts.SemiBold]: require("../assets/fonts/SourceSansPro-SemiBold.ttf"),
    [Fonts.Italic]: require("../assets/fonts/SourceSansPro-Italic.ttf"),
    [Fonts.IconSetSolid]: require("../assets/fonts/icomoon_solid.ttf"),
    [Fonts.IconSetOutline]: require("../assets/fonts/icomoon_outline.ttf"),
  });

Theme

In order for this component library to work you need to provide your app with a theme. Wrap your app with a provider and set your theme with the value prop. See the following examples.

Set a custom theme

Set a light and/or a dark theme.

 ThemeManager.setTheme({
        light: YourAwsomeLightTheme,
        dark: YourAwsomeDarkTheme
      });
    };

Provider

Get the theme value (dark/light) from Theme and place the provider around your app.

import { Theme } from "@valkdigital/ui-kit"

<ThemeContext.Provider
    value={darkModeOn ? Theme.dark : Theme.light}
>
    <YourAwesomeApp />
</ThemeContext.Provider>

Example

You can see an extensive documented web preview of the component library at https://valkdigital.github.io/ui-kit or by running yarn storybook. With the use of storybook you'll be able to see each component with the following topics:

  • Preview
  • Props overview
  • Additional information regarding the behavior of the component

To preview the UI-kit components on iOS and Android you can run:

  • iOS:

    yarn run-ios

  • Android:

    yarn run-android