SO Component Integration

Overview

Integrating an existing React component(from storybook) into your project involves a few straightforward steps:

Step 1: Obtain the Existing React Component

You should have access to the existing React component's source code or a pre-built component package that you want to integrate. Ensure that you can access the component's files and dependencies. Export the below authentication token to install so UI components. The token will be provided in the training.

export SO_NPM_AUTH_TOKEN=${SO_NPM_AUTH_TOKEN}

Step 2: Create npm config file

The .npmrc file is a configuration file used by npm to customize various aspects of its behavior. You can create a .npmrc file manually in your project's root directory and update with below commands.

@so:registry=https://gitlab.com/api/v4/projects/37073172/packages/npm/
save-exact=true
//gitlab.com/api/v4/projects/37073172/packages/npm/:_authToken=${SO_NPM_AUTH_TOKEN}

Step 3: Install Dependencies (if any)

If the existing React component has dependencies that are not already in your project, you need to install them. You can use npm or yarn to do this. For example, here in our React project we need to install so-component package to reuse the components

npm i --save-dev @so/components
npm i sass --save-dev

Step 4: Import the Existing Component

In the file where you want to use the existing React component, import it at the top of your JavaScript/JSX file, eg:

import { Button } from '@so/components';

Step 5: Use the Existing Component

You can now use the imported existing component within your JSX as if it were any other React component. Include it in your render method or functional component return statement.

<Button color='Success'>Click Me</Button>