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.
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 />
</>
);
}
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>
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.
:::