Shared library for ExtJS

This library provides React components and utility functions for integrating React within an ExtJS application. It is designed to be used alongside ExtJS, allowing seamless use of React components in your ExtJS projects.

Setup

Install the package using npm:

npm install @verint/shared-react-components

After installation, copy umd.js and umd.css from /path/to/node_modules/@verint/shared-react-components to your application directory and load the library in your ExtJS application using Ext.Loader.loadScriptsSync. Add the following code to your application's launch or initialization script:

    // Load the UMD JavaScript file
    Ext.Loader.loadScriptsSync(['/path/to/app/umd.js']);

    // Load the CSS file
    AppShell.loadCss('/path/to/app/umd.css');

    // Your app initialization code here

Ensure that the paths to the UMD JavaScript and CSS files are correct based on your project structure.

The library will be available globally as ReactLibrary once loaded.

Available Functions

ReactLibrary.renderComponent(Component, id) Renders a React component to a DOM element with the specified ID.
ReactLibrary.removeComponent(id) Unmounts a React component from a DOM element with the specified ID.
ReactLibrary.reactComponent(component, props, children) Creates a React element with the given component, props, and children.
ReactLibrary.reactTemplate A template literal tag for creating React elements using HTM (Hyperscript Tagged Markup).
ReactLibrary.renderLegacyComponent(component, id, cssPrefix) Renders a legacy React component wrapped in a LuxStylesProvider to a DOM element with the specified ID.
ReactLibrary.Components An object containing all available React components from the library.

Integration Examples

Rendering a React Component in an ExtJS Panel

Ext.define('MyApp.view.ReactPanel', {
    extend: 'Ext.panel.Panel',
    xtype: 'reactpanel',
    
    initComponent: function() {
        this.callParent();
        
        this.on('afterrender', this.renderReactComponent, this);
        this.on('destroy', this.removeReactComponent, this);
    },
    
    renderReactComponent: function() {
        const MyReactComponent = ReactLibrary.Components.MyComponent;
        ReactLibrary.renderComponent(
            ReactLibrary.reactComponent(MyReactComponent, {}, null),
            this.body.id
        );
    },
    
    removeReactComponent: function() {
        ReactLibrary.removeComponent(this.body.id);
    }
});

Using reactTemplate in ExtJS

Rendering a Legacy React Component

Best Practices

Always remove React components in the destroy event of your ExtJS components to prevent memory leaks.
Use unique IDs for each React component to avoid conflicts.
Consider using ExtJS layouts to manage the positioning of your React components within the ExtJS application structure.
Be mindful of styling conflicts between ExtJS and React components. The provided CSS file should handle most cases, but you may need additional scoping for custom styles.

Troubleshooting

If React components are not rendering, ensure that the target DOM element exists before calling renderComponent.
For styling issues, check that the CSS file is loaded correctly and that the cssPrefix in renderLegacyComponent is not conflicting with your ExtJS styles.
If you encounter "ReactLibrary is not defined" errors, make sure the UMD script is loaded correctly using Ext.Loader.loadScriptsSync before attempting to use the ReactLibrary.

Browser Compatibility

This library is designed to work with modern browsers that support ES5+. Ensure that your target browsers are compatible with both ExtJS and React.

Verint LUX Design System