Nutritious Pancake Mountain

    TypeScript icon, indicating that this package has built-in type declarations

    0.4.0 • Public • Published


    Stencil can generate React class component wrappers for your web components. This allows your Stencil components to be used within a React application. The benefits of using Stencil's component wrappers over the standard web components include:

    • Typings for your components
    • JSX bindings for custom events (event names are renamed to match React's convention of onEventName)
    • Tag names are renamed to match PascalCase convention.
    • Adds support for property types outside of string and number (supports: functions, objects and arrays).

    For a detailed guide on how to add the react output target to a project, visit:


    npm install @stencil/react-output-target


    In your stencil.config.ts add the following configuration to the outputTargets section:

    import { Config } from '@stencil/core';
    import { reactOutputTarget } from '@stencil/react-output-target';
    export const config: Config = {
      namespace: 'demo',
      outputTargets: [
          componentCorePackage: 'component-library',
          proxiesFile: '../component-library-react/src/components.ts',
          type: 'dist',
          esmLoaderPath: '../loader',

    Config Options

    Property Description
    componentCorePackage The NPM package name of your Stencil component library. This package is used as a dependency for your React wrappers.
    proxiesFile The output file of all the component wrappers generated by the output target. This file path should point to a location within your React library/project.
    excludeComponents An array of tag names to exclude from generating component wrappers for. This is helpful when have a custom framework implementation of a specific component or need to extend the base component wrapper behavior.
    loaderDir This is the path to where the defineCustomElements function exists in your built project. If loaderDir is not provided, the /dist/loader directory will be used.
    includePolyfills If true, polyfills will automatically be imported and the applyPolyfills function will be called in your proxies file. This can only be used when lazy loading Web Components and will not work when includeImportCustomElements is true.
    includeDefineCustomElements If true, all Web Components will automatically be registered with the Custom Elements Registry. This can only be used when lazy loading Web Components and will not work when includeImportCustomElements is true.
    includeImportCustomElements If true, the output target will import the custom element instance and register it with the Custom Elements Registry when the component is imported inside of a user's app. This can only be used with the Custom Elements Bundle and will not work with lazy loaded components.
    customElementsDir This is the directory where the custom elements are imported from when using the Custom Elements Bundle. Defaults to the components directory. Only applies when includeImportCustomElements is true.




    npm i @stencil/react-output-target

    DownloadsWeekly Downloads






    Unpacked Size

    72.5 kB

    Total Files


    Last publish


    • ionicjs
    • jthoms1
    • maxlynch
    • mhartington
    • brandyscarney
    • kensodemann
    • larsmikkelsen
    • nhyatt
    • liamdebeasi
    • jaredcbaum
    • rwaskiewicz-ionic