@moxiworks/mds-react

This package in the monorepo serves as the React integration for the Stencil-generated components. The lib directory within this package contains the Stencil-generated components, which are built to be consumed by React applications.

Generating the lib Directory

The lib directory holds the Stencil-generated components, which serve as the foundation for the React library. These components are defined using web standards and can be used seamlessly within React applications. To generate the lib directory, run the build script in the stencil-library package. In the packages/stencil-library/stencil.config.ts, you can see the config for outputting this.

Building the lib Directory

The yarn build script handles the tsc build. The output is stored in the dist directory. Only run this command after successfully completing the previous step.

Usage

1. In your react application, add the @moxiworks/mds-react package to your dependancies.

   Make sure you replace the x.x.x with the latest version, we can be found in the badge at the top of this doc. Avoid using ^ or ~, as we want to be using the exact value.

"dependencies": {
  "@moxiworks/mds-react": "x.x.x"
}

2. Install the package

yarn install
// or
npm install

3. Use in the app. We've decided to make call the defineCustomElements function within @moxiworks/mds-react. This will be called the moment you import from the package.

   Ensure that you wrap the code with a mds class. This allows you to customise what sections of the app have access to the mds styles. In most cases, leaving it in the root component does the job.

// App.tsx
import './App.css';
import { MxButton } from '@moxiworks/mds-react';

function App() {
  return (
    <div className="mds">
      <MxButton icon="mds-check">It works!</MxButton>
    </div>
  );
}

export default App;