Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/petermikitsh/stencil-react
CLI tool for generating React Components ("bindings") from Stencil 1.x projects
https://github.com/petermikitsh/stencil-react
react stencil stencil-components stenciljs web-components
Last synced: 2 months ago
JSON representation
CLI tool for generating React Components ("bindings") from Stencil 1.x projects
- Host: GitHub
- URL: https://github.com/petermikitsh/stencil-react
- Owner: petermikitsh
- License: mit
- Archived: true
- Created: 2019-09-01T21:13:09.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-12-29T22:11:27.000Z (almost 5 years ago)
- Last Synced: 2024-09-26T17:22:48.656Z (3 months ago)
- Topics: react, stencil, stencil-components, stenciljs, web-components
- Language: JavaScript
- Homepage: https://blog.mikit.sh/post/React-Bindings-For-Stencil-Components/
- Size: 449 KB
- Stars: 12
- Watchers: 5
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-stenciljs - stencil-react
README
# Update
**Check out https://github.com/ionic-team/stencil-ds-plugins**. You may want that instead of this.
# stencil-react
[![npm package][npm-image]][npm-url]
[![Build Status][travis-image]][travis-url]
[![Coverage Status][coveralls-image]][coveralls-url]
[![Dependencies Status][david-image]][david-url]
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 with `main`, `module`, and `types` 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:
```jsx
import { Button } from '@anjuna/core-react';
```
Custom properties, custom events, synthentic React events, and aria-attributes are all supported:
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
const App = (
{ debugger; }}
onClick={(syntheticReactClickEvent) => { debugger; }}
aria-label="My ARIA Example"
>
Hello World
);
ReactDOM.render(, document.body);
```
[npm-image]:https://img.shields.io/npm/v/stencil-react.svg
[npm-url]:https://www.npmjs.com/package/stencil-react
[travis-image]:https://travis-ci.org/petermikitsh/stencil-react.svg?branch=master
[travis-url]:https://travis-ci.org/petermikitsh/stencil-react
[david-image]:https://david-dm.org/petermikitsh/stencil-react/status.svg
[david-url]:https://david-dm.org/petermikitsh/stencil-react
[coveralls-image]:https://coveralls.io/repos/github/petermikitsh/stencil-react/badge.svg?branch=master
[coveralls-url]:https://coveralls.io/github/petermikitsh/stencil-react?branch=master