npm install @bcodes/json-file-input --save
<bc-json-file-input multiple preview-json>
<!-- Any element can be used in place of a button -->
<button>Upload Files</button>
</bc-json-file-input>
The slotted element (<button>
in the example above) is outside of the Shadow DOM and can be styled externally
The following CSS variabels can be overriden globally
:root {
--bc-preview-background: #212020;
--bc-preview-color: #40c64c;
--bc-preview-font-family: sans-serif;
--bc-preview-error: #791313
}
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
multiple |
multiple |
boolean |
false |
|
objectToConsole |
console-log |
boolean |
false |
|
previewJson |
preview-json |
boolean |
false |
Event | Description | Type |
---|---|---|
filesLoaded |
Event emitted when files have been loaded | CustomEvent<File[]> |
filesRead |
Event emitted when files have been read (using FileReader) | CustomEvent<readonly IFileData[]> |
graph TD;
bc-json-file-input --> bc-json-preview
style bc-json-file-input fill:#f9f,stroke:#333,stroke-width:4px
Built with StencilJS
https://stenciljs.com/docs/decorators
- Publish to NPM
- Put a script tag similar to this
<script src='https://unpkg.com/my-component@0.0.1/dist/mycomponent.js'></script>
in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
- Run
npm install my-component --save
- Put a script tag similar to this
<script src='node_modules/my-component/dist/mycomponent.js'></script>
in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
- Run
npm install my-component --save
- Add an import to the npm packages
import my-component;
- Then you can use the element anywhere in your template, JSX, html etc
npm publish --access=public
- Create mocks using Jest support for
__mocks__
mocks folders at same level
Stencil's jest setup does not include jsdom. Stencil uses a slimmed down version of Puppeteer for unit tests - the window and document properties of which can be accessed via the page object returned from Stencil's newSpecPage()
As some of my tests are running without newSpecPage I needed to use the global object instead e.g. global.FileReader = createMockFileReader(files)