2.0.0 • Published 6 years ago
stencil-props v2.0.0
Stencil Props
A component that passes data attributes as props to Stencil components.
Example passing component inside stencil props useful for keeping classes etc.
<stencil-props data-str='"abc"' data-num='1' data-obj='{"foo":"bar"}' data-arr='[1,2,3]' data-bool='true'>
<my-app class="foo"></my-app>
</stencil-props>
Example passing component as a string
<stencil-props component="my-app" data-str='"abc"' data-num='1' data-obj='{"foo":"bar"}' data-arr='[1,2,3]' data-bool='true'>
</stencil-props>
passes on data to the my-app component
import { Component, Prop } from '@stencil/core';
import 'stencil-props';
export interface Obj {
foo?: string;
}
@Component({
tag: 'my-app'
})
export class MyApp {
@Prop() str: string;
@Prop() num: number;
@Prop() obj: Obj = {};
@Prop() arr: number[] = [];
@Prop() bool: boolean;
render() {
return (
<stencil-props>
<div>str - {this.str}</div>
<div>num - {this.num}</div>
<div>obj - {this.obj.foo}</div>
<div>arr - {this.arr[2]}</div>
<div>boo - {this.bool ? 'true' : 'false'}</div>
</stencil-props>
);
}
}
which outputs
<div>
<div>str - abc</div>
<div>num - 1</div>
<div>obj - bar</div>
<div>arr - 3</div>
<div>boo - true</div>
</div>
Options
show-errors (default: false)
<stencil-props data-str='{x}' show-errors>
'show-errors' will log errors to the console