Update Guide

    In the Ignite UI for React versioning the first number always matches the major version of React the code supports and the second is dedicated for major version releases. Breaking changes may be introduced between major releases. A comprehensive list of changes for each release of Ignite UI for React can be found in the product CHANGELOG.

    From 18.9.0 to 19.0.0

    This release include a major rework of some of our React components internals leading to the following changes in igniteui-react and igniteui-react-grids packages:

    General

    Breaking changes

    • Ignite UI for React components are now using React Function Components, therefore references obtained from useRef will now be a forward of the native element instead of a class component instance. Many of the use cases could remain unchanged but there are possible changes required such as not needing an extra property to access the DOM element itself.
    • Components no longer accept alternative string union on all properties types (e.g boolean | string or number | string). Additionally, string union types are no longer case-insensitive.
    <IgrColumn dataType="String" sortable="true"></IgrColumn>

    Becomes:

    <IgrColumn dataType="string" sortable={true}></IgrColumn>
    • Component events are now on prefixed, i.e:
    <IgrGrid columnPin={handlePinning}></IgrGrid>

    Becomes

    <IgrGrid onColumnPin={handlePinning}></IgrGrid>
    • Component events emit a single standard CustomEvent argument instead of the sender as first argument. Therefore, custom properties like sender.nativeElement are no longer available, but native event properties all are. Also, types for event arguments are available as aliases for the specific custom event, so usage accessing detail will remain the same. With the new handler signature event.detail is the same and event.target is the DOM element equivalent to the sender:
        const handlePinning = (sender: IgrGridBaseDirective, event: IgrPinColumnCancellableEventArgs) => {};

    Becomes:

        const handlePinning = (event: IgrPinColumnCancellableEventArgs) => {}
    // equivalent to
    const handlePinning = (event: CustomEvent<IgrPinColumnCancellableEventArgsDetail>) => {}
    • Components no longer have the non-functional name property by default. The name property only remains in igniteui-react components, mostly form inputs such as IgrInput and IgrCombo, where it has native functionality.
    • Ignite UI for React components no longer require a key property, unless it is necessary according to React`s documentation
    • The IgrDataGrid is no longer part of igniteui-react-grids package. It has been moved to igniteui-react-data-grids, making igniteui-react-grids more lightweight.
    • There were several types that were exposed as classes in version 18.9.0 which is no longer the case. Those are now exported as types and can be used like this:
    const pivotConfiguration = new IgrPivotConfiguration();

    Becomes:

    const pivotConfiguration: IgrPivotConfiguration = {
  rows: [],
  columns: [],
  values: []
}
    • IgrButton
      • Breaking Changes
        • clicked event is removed. Use native onClick instead.
    • IgrInput
      • Breaking Changes
        • inputOccurred event is renamed to onInput.