Skip to main content

Installation

Install the library​

Run the following command to add the Embassy UI library to your project:

npm install @amalgamaco/embassy-ui

Or, if you are using Yarn:

yarn add @amalgamaco/embassy-ui

Web​

You can use this library in your React JS project using react-native-web. To learn how to install and configure react-native-web follow the project's installation guide.

This library depends on react-native-animatable in order to perform the Dialog component animations and there is an extra step of configuration in order for that to work on web:

In your webpack configuration you will need to add a new module.rule as follows:

module.exports = {
  module: {
    rules: [
      ...,
      {
        test: /\.(js|jsx|ts|tsx)$/,
        loader: 'babel-loader',
        include: path.resolve(__dirname, 'node_modules/react-native-animatable/' )
        options: {
          presets: [
            '@babel/env',
            '@babel/preset-react'
          ],
          plugins: [
            '@babel/plugin-proposal-class-properties'
          ]
        }
      }
    ]
  }
}

For more webpack configuration examples you can check the Webpack Examples page.

Peer dependencies​

You need to install these peer dependencies in order to use the library:

caution

You need to add react-native-svg to your project and set it up properly (see project's README) for the default icons package to work. This package is needed by several componentes including: TextInput, Radio, Checkbox, etc.

Plataform specific​

Some peer-dependencies are platform dependent:

For ReactNative projects​

For ReactJS projects​

Default Fonts​

ReactNative​

To install the default fonts (Epilogue and Inter) to your ReactNative project you need to follow the next steps:

  1. Download all the font files from here and put them in the assets/fonts folder (create the folder if it doesn't exists in your project).

  2. Create a react-native.config.js file if you don't have already one in your project and add the following configuration:

    module.exports = {
        project: {
            ios: {},
            android: {}
        },
        assets: [ './assets/fonts/' ]
    };

  3. Link the assets:

    For react-native < 0.69 

    yarn run react-native link

    For react-native >= 0.69

    npx react-native-asset

Web​

To add the default fonts (Epilogue and Inter) to your React JS web project you need to:

  1. Add the fonts links to your project's public/index.html file inside the <head> tag:
    <link href="https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
  2. Extend the default theme to overwrite the font configuration to always use the same font family name not matter the weight or style:
const customTheme = extendThemeConfig( {
    typography: {
        fonts: {
            // When working with google fonts the font family is the
            // same for all variants
            'Epilogue': {
                100: { normal: 'Epilogue', italic: 'Epilogue' },
                200: { normal: 'Epilogue', italic: 'Epilogue' },
                300: { normal: 'Epilogue', italic: 'Epilogue' },
                400: { normal: 'Epilogue', italic: 'Epilogue' },
                500: { normal: 'Epilogue', italic: 'Epilogue' },
                600: { normal: 'Epilogue', italic: 'Epilogue' },
                700: { normal: 'Epilogue', italic: 'Epilogue' },
                800: { normal: 'Epilogue', italic: 'Epilogue' },
                900: { normal: 'Epilogue', italic: 'Epilogue' }
            },
            'Inter': {
                100: { normal: 'Inter', italic: 'Inter' },
                200: { normal: 'Inter', italic: 'Inter' },
                300: { normal: 'Inter', italic: 'Inter' },
                400: { normal: 'Inter', italic: 'Inter' },
                500: { normal: 'Inter', italic: 'Inter' },
                600: { normal: 'Inter', italic: 'Inter' },
                700: { normal: 'Inter', italic: 'Inter' },
                800: { normal: 'Inter', italic: 'Inter' },
                900: { normal: 'Inter', italic: 'Inter' }
            }
        }
    }
} as const );

For more information on how extend the default theme refer to the Customizing Theme guide.

Add ThemeProvider​

In order for the components to work correctly they need to access the current theme's configuration. You can provide this configuration using the ThemeProvider component.

We recommend adding this component at the top of the components hierarchy, wrapping the whole app with it.

import React from "react";
import { ThemeProvider } from "@amalgamaco/embassy-ui";

const App = () => (
    <ThemeProvider>
        {/* Your app content goes here */}
    </ThemeProvider>
);

export default App;