Update
Check out https://github.com/ionic-team/stencil-ds-plugins. You may want that instead of this.
stencil-react
Generate React Components ("bindings") from Stencil 1.x projects.
Usage
Make sure your Stencil v1 component library (e.g, @anjuna/core
) is installed as an npm dependency.
npm i stencil-react
stencil-react @anjuna/core --outDir dist
Options
Option | Description | Default Value |
---|---|---|
--outDir |
Output directory | dist |
--packageJson |
Override output package.json fields | N/A |
--packageJsonPath |
Override output package.json fields from file | N/A |
You cannot override fields ['main', 'module', 'types', 'peerDependencies', 'dependencies']
.
Output
Your output directory will contain:
- A
package.json
file withmain
,module
, andtypes
fields - An ES Module build of your React-wrapped Stencil components
- A CommonJS build of your React-wrapped Stencil components
- TypeScript types
- Source Maps
Usage (In React)
The generated NPM package is the original, suffixed with -react
.
All your Stencil Components will be exported from the main/module entry file. E.g., if you had a Button
component:
import Button from '@anjuna/core-react';
Custom properties, custom events, synthentic React events, and aria-attributes are all supported:
import React from 'react';import ReactDOM from 'react-dom'; const App = <Button ="primary" = = ="My ARIA Example" > Hello World </Button>; ReactDOM;