Thin React wrappers for Pepperi Angular Elements (Web Components) to improve DX in React.
Thin React wrappers around Pepperi Angular Elements (Web Components) for better DX in React apps.
- Install
``bash`
npm i @pepperi-addons/ngx-lib-react
- Load Elements (embedded in this package)
`ts`
// e.g., in src/index.tsx or src/main.tsx
import '@pepperi-addons/ngx-lib-react/elements/runtime.js';
import '@pepperi-addons/ngx-lib-react/elements/polyfills.js';
import '@pepperi-addons/ngx-lib-react/elements/main.js';
import '@pepperi-addons/ngx-lib-react/elements/styles.css';
- Theme wrapper
`tsx`
export function App() {
return {/ ... /};
}
- Use components
`tsx
import { PepButton, PepTextbox, PepSelect, PepListChooser } from '@pepperi-addons/ngx-lib-react';
export function Example() {
return (
{ key: 'all', text: 'All Lists' },
{ key: 'favorites', text: 'Favorites' },
{ key: 'archived', text: 'Archived' },
]}
currentList={{ key: 'all', text: 'All Lists' }}
sizeType="md"
onChange={(e) => console.log('List changed', e.source)}
/>
This package expects you to load the Elements bundle and theme CSS (from
) in your app.Install
`bash
npm i @pepperi-addons/ngx-lib-react @pepperi-addons/ngx-lib-elements
`Setup in React
Load the elements scripts and CSS once in your app (e.g., in
):`ts
import '@pepperi-addons/ngx-lib-elements/runtime.js';
import '@pepperi-addons/ngx-lib-elements/polyfills.js';
import '@pepperi-addons/ngx-lib-elements/main.js';
import '@pepperi-addons/ngx-lib-elements/styles.css';
`Wrap your app with the Pepperi theme class:
tsx
export function App() {
return {/ ... /};
}
`Consume in another (React) project
- Install
bash
npm i @pepperi-addons/ngx-lib-react
`- Load Pepperi Elements (required at runtime)
- Option A: via this package (embedded Elements, recommended)
ts
// e.g., in src/index.tsx or src/main.tsx
import '@pepperi-addons/ngx-lib-react/elements/runtime.js';
import '@pepperi-addons/ngx-lib-react/elements/polyfills.js';
import '@pepperi-addons/ngx-lib-react/elements/main.js';
import '@pepperi-addons/ngx-lib-react/elements/styles.css';
` - Option B: host the compiled files and include tags
html
`- Theme: Ensure a parent element has the
class (see example above).Usage
`tsx
import { PepButton, PepSelect, PepTextbox } from '@pepperi-addons/ngx-lib-react';export function Example() {
return (
console.log(e)} />
console.log('Status', v)} />
);
}
`Notes:
- For arrays/objects, the wrappers set element properties (not attributes) under the hood.
- Events are bridged from the custom element
to React callbacks.
- Ensure .pepperi-theme is applied at app level so Angular Material overlays are themed.⚠️ Angular Services NOT Exported Directly
Angular service classes (e.g.
PepHttpService, PepSessionService,
PepCustomizationService) are not exported from this package, to avoid pulling
Angular and its DI runtime into your React bundle.Instead you should use:
- HTTP helper functions (no Angular runtime).
- Bridge-based helpers that call selected Angular services (HTTP, Session,
Customization, Translate) via the Elements bundle at runtime (see
SERVICES.md for full details).
- Custom element components (PepDialog, PepSnackBar, etc.) for UI.
- Standard JavaScript libraries (uuid, validator, js-cookie, etc.) for
general utilities.See SERVICES.md for complete documentation on available
service helpers (HTTP/session/customization) and usage examples.
For a concise, repo-level summary of all exported helpers and build artifacts,
see
docs/services-export-summary.md`.