data-view-web-component
v0.0.12
Published
Generic Web Component used to display various hierarchical data in a card format
Downloads
5
Readme
Generic Data View Web Component for KIT DM applications
Development
How to run with Storybook
Execute both commands in parallel
npm run build-watch
and
npm run storybook
Only run Stencil without Storybook
npm start
Publishing
To publish the Web Component, simply run npm publish
in the root directory. This will automatically run the prepare
script which builds the component before publishing.
The React Wrapper Library should also always be published at the same time, with the same package version (not for a technical reason, rather to facilitate understanding). The generated files (react-library/lib/*
) get generated when the build
script is executed in the root directory, since React is one of the output targets.
- Enter the react-library directory
cd react-library
- Run
npm publish
. Just like in the root, theprepare
script will be called and will compile the Typescript.
Installation
React App
To use this Web Component in a React App, it is recommended to use the React Wrapper Library. This allows for correct Event Propagation and passing Object & Arrays directly as Props, aswell as allowing Intellisense for the props.
- Run
npm install data-card-react
- Use as any other React Component
Script tag
- Put a script tag
<script type='module' src='https://unpkg.com/[email protected]/dist/data-view-web-component/data-view-web-component.esm.js'></script>
in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
Node Modules
- Run
npm install data-view-web-component --save
- Put a script tag
<script type='module' src='node_modules/data-view-web-component/data-view-web-component/data-view-web-component.esm.js'></script>
in the head of your index.html - OR load the element at the start of the App:
import { applyPolyfills, defineCustomElements } from 'data-view-web-component/loader';
applyPolyfills().then(() => {
defineCustomElements();
});
- Then you can use the element anywhere in your template, JSX, html etc
In a stencil-starter app
- Run
npm install data-view-web-component --save
- Add an import to the npm packages
import data-view-web-component;
- Then you can use the element anywhere in your template, JSX, html etc
Usage
Icons
All Icons from this list can be used: https://icon-sets.iconify.design/