@pepperi-addons/ngx-composite-lib-react

React wrappers for Pepperi ngx-composite-lib Angular Elements.

Version 0.5.2

This package provides React wrappers for 15 fully converted Angular Elements from ngx-composite-lib.

Available Components

``tsx
import {
PepColorSettings,
PepGroupButtonsSettings,
PepFlowPickerButton,
PepIconPicker,
PepPaddingSettings,
PepShadowSettings,
PepRichText,
PepShowIfBadge,
PepGenericList,
PepFileStatusPanel,
PepGenericForm,
PepDataViewBuilder,
PepManageParameters,
PepMappingParameters,
PepGenericFieldsBuilder,
} from '@pepperi-addons/ngx-composite-lib-react';
`

Component Details

$3

`bash
npm install @pepperi-addons/ngx-composite-lib-react
`

Setup

$3

Add to your HTML:

`html







`

$3

The components use @ngx-translate for internationalization. You must load the translation files:

`typescript
// In your Angular app (if using Angular)
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(
http,
'/node_modules/@pepperi-addons/ngx-composite-lib-react/i18n/',
'.ngx-composite-lib.json'
);
}

// In your module
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
`

Available Languages:
- English (en)
- German (de)
- Spanish (es)
- French (fr)
- Hebrew (he)
- Hungarian (hu)
- Italian (it)
- Japanese (ja)
- Dutch (nl)
- Polish (pl)
- Portuguese (pt)
- Russian (ru)
- Chinese (zh)

Translation files are located at: /node_modules/@pepperi-addons/ngx-composite-lib-react/i18n/

Usage Examples

$3

`tsx
import React, { useState } from 'react';
import { PepColorSettings } from '@pepperi-addons/ngx-composite-lib-react';

function MyComponent() {
const [color, setColor] = useState('#FF5733');

return (
value={color}
onValueChange={setColor}
/>
);
}
`

$3

`tsx
import React, { useState } from 'react';
import {
PepGenericFieldsBuilder,
PepDataViewBuilder,
PepMappingParameters
} from '@pepperi-addons/ngx-composite-lib-react';

function FormBuilder() {
const [fields, setFields] = useState([]);

return (
builderTitle="Form Fields"
availableFields={availableFields}
fields={fields}
onFieldsChange={setFields}
/>
);
}
``

Features

- ✅ 15 Production-Ready Components - All tested and working
- ✅ Full TypeScript Support - Complete type definitions
- ✅ React-Friendly API - Idiomatic React patterns
- ✅ Event Handling - Proper event propagation
- ✅ React 17+ & 18+ Compatible - Works with modern React
- ✅ Comprehensive Documentation - Full API reference included

License

MIT