Installation & Use

Install the package from npm, for more information visit Signet React Documentation

npm install @episource/signet-react

The signet-react depends on signet which is the main application for the design system. The react library only contains components that you can import into your react application, and utilize immediately. Once you install signet-react, it will install signet and signet-tokens, the design tokens application for Episource.

Import and use components from signet-react

On your app.tsx/index.js or any react file, import and use the components

import { MyComponent } from  '@episource/signet-react'; 

export  function  App() {
return (
    <>
        <h1>Header Component</h1>
         {/* Add MyComponent Here */}
        <MyComponent first='Sanmi' middle='Ebenezer' last='Ajanaku'></MyComponent>
        <NxWelcome title="Episource React JS!"/>
        <div  />
    </>
    );
}

Alternative Method to use the component

On your index.ts or index.js file, add import and use the components through polyfills.

// FILE - index.js
import { defineCustomElements, applyPolyfills } from '@episource/signet/loader'

// Add the applyPolyfills to the functions on the index.js
applyPolyfills().then(() => {
    defineCustomElements();
});

// Add MyComponent to any react file. e.g. welcome.js or welcome.tsx
<my-component first='Sanmi' middle='Ebenezer' last='Ajanaku'></my-component>

Remember to use Design Tokens

To enjoy your React components, remember to use our @episource/design-tokens on your main application!

import '@episource/signet-tokens/dist/episource/tokens.css'

:::tip Props

To know the props of the component, hover your mouse on MyComponent; this component has the first, middle, and last props.

:::