README.md

DT Web Components in Create React App

This project was bootstrapped with Create React App.

Run in Browser

npm link ../../../[name-of-project-directory]
npm install
npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

How Components Are Included

1. Add wc-react package to your project (npm install wc-react) This is needed in order to wrap the basic web components for how React interacts with components. See WC React for details.

2. Add @disciple.tools/web-components package to your project (npm install @disciple.tools/web-components)

3. Include above packages in the React component where you want to use them:

   import '@disciple.tools/web-components';
   import { wrapWc } from 'wc-react';
   

4. For each DT component you want to use, wrap it with the wrapWc function:

   const DtText = wrapWc('dt-text');
   const DtTile = wrapWc('dt-tile');
   

5. Use the wrapped components as you would any normal React component:

   function App() {
     [...]
     return (
       <div>
         <DtTile title="My Tile" expands>
           <DtText name="myText" label="My Text Field" />
         </DtTile>
       </div>
     );
   }