Nano Components React

React has a difficult story with web components. Their documentation shows the simplest possible example but more than likely you will want to pass more than strings to your component. If you want to know what the story is without the bindings go here: [https://stenciljs.com/docs/react].

With bindings the web components get wrapped in a React component and then immediately become available as React Components. Some of the advantages of doing this are that you get types for your components. One of the main issues with React is that react does not propertly pass properties to web components. Out of the box React can only pass strings and numbers to components and it cannot listen to custom events. With the bindings the components appear as though they are React components and all properties get passed correctly including functions, objects, and arrays. The bindings also account for custom events by creating a prop called ‘on’. These allow React developers to interact with the web components as though they are React components.

Usage

In your project: npm i @nanoporetech-digital/components-react OR npm add @nanoporetech-digital/components-react Then: import { Input } from '@nanoporetech-digital/components-react';

Run a demo - a useful visual sanity check

npm run demo

Publishing this package (this should be done automatically via lerna)

Step 1.

• Build the Nano Components package.

Step 2.

• Run build on this package. npm build
• Run publish on this package. npm publish