konsuld-widget

React widget published as an npm package and also buildable as an embeddable script for non-React hosts.

Install (as npm package)

npm install konsuld-widget

Use in a React app

import { KonsuldWidget } from 'konsuld-widget';

export default function Example() {
  return (
    <KonsuldWidget
      height={600}
      width="100%"
      embedUrl="http://localhost:3000/embed/widget"
      className="my-widget"
    />
  );
}

Props:

• height (number | string) default: 600
• width (number | string) default: "100%"
• The widget iframe URL is hardcoded to https://dev.konsuld.app/embed/widget.
• className (string)
• style (React.CSSProperties)

Use as an embeddable script (non-React host)

1. Build the script bundle:

npm run build:widget

This outputs widget/index.js.

2. Include the script and a mount element in your page:

<div class="konsuld-widget"></div>
<script src="/path/to/widget/index.js"></script>

The script finds all elements with class konsuld-widget and mounts the default widget into each.

The embed URL is not configurable at runtime and always points to the production endpoint.

Local development

• Start CRA demo app: npm start
• Build npm package (CJS/ESM/types to dist/): npm run lib:build
• Watch library during development: npm run lib:watch
• Build embeddable script (to widget/): npm run build:widget

Link locally into another app (for rapid iteration):

# in konsuld-widget
npm run lib:build
npm link

# in another React app
npm link konsuld-widget

Restart the other app’s dev server if the linker doesn’t pick up metadata changes.

Alternatively, install via a tarball for a more realistic test:

npm run lib:build
npm pack
# then in the other app
npm install /absolute/path/to/konsuld-widget-<version>.tgz

Build & publish

• Library build (npm package output):
  • npm run lib:build → outputs dist/index.js (ESM), dist/index.cjs (CJS), and dist/index.d.ts (types)
• Embeddable script build: npm run build:widget → outputs to widget/

Publish to npm:

npm version patch   # or minor/major
npm publish         # ensure you’re logged in: npm login

Project details

• Source entry for library: src/index.ts (re-exports from src/lib/KonsuldWidget.tsx)
• Script entry: src/index.tsx (auto-mounts widget into .konsuld-widget elements)
• Package entry points (package.json):
  • exports.import: dist/index.js
  • exports.require: dist/index.cjs
  • types: dist/index.d.ts
• Peer deps: react >= 17, react-dom >= 17

Note: Avoid duplicate React installs when linking locally. If you see hook/renderer mismatch errors, ensure your host app resolves a single version of react and react-dom.