Modiffy

Meaningful objects diff

Provides a React component to easily view all meaningful differences between 2 objects.

Live demo

Installation

npm install modiffy

Usage

<Diff oldValue={{ name: 'diff' }} newValue={{ name: 'modiffy' }} expanded={true} />

Supported features

| | Features | Since | | --- | --- | --- | | ✓ | Custom formatters | | | ✓ | Ignored properties | | | ✓ | i18n | | | ✓✓ | Object previewDeep toggle | | | | Customizable theme | | | Empty values | | | Date formatting | | | Agnostic Web component |

Configuration

Formatters

When a changed node is not a simple value (like a number, string or boolean), the library displays an "object" badge. You can display something more meaningful by implementing your own formatter:

import { Formatter } from 'modiffy'

export class PersonFormatter implements Formatter {

    matches(value: any): boolean {
        return Object.hasOwn(value ?? {}, 'firstName');
    }
    
    format(value: any): JSX.Element {
        return value.firstName;
    }
}

import { configuration } from 'modiffy';
import { PersonFormatter } from "./PersonFormatter";

configuration.addFormatter(new PersonFormatter());

<Diff expanded={true}
    oldValue={ [] }
    newValue={ [{ firstName: 'Phil', age: 35 }] }
/>

Ignored properties

Some properties may be irrelevant like technical identifiers for endusers. You can ignore such properties with the ignoredProperties option:

import { configuration } from 'modiffy';

configuration.applyOptions({
    ignoredProperties: [
        'id'
    ]
});

i18n

By default, labels in the <Diff> component are written in english and properties are not translated. If your application uses the react-i18next library, you can adapt the component's language to the endusers and provide your own translations for the properties.

The translation key for your properties should be formatted like this: property.<name of your property>

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

const i18nResources = {
    en: {
        translation: {
            "property": {
                "age": "age",
                "firstName": "first name"
            }
        }
    },
    fr: {
        translation: {
            "property": {
                "age": "âge",
                "firstName": "prénom"
            }
        }
    }
}

i18n
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        fallbackLng: 'en',
        resources: i18nResources,
        interpolation: {
            escapeValue: false,
        }
    });

export default i18n;

import { configuration } from 'modiffy';
import i18n from './i18n';

configuration.usei18n(i18n);

If you want to put translations in a dedicated namespace to avoid conflicts, you must specify in the configuration which namespace the modiffy library has to use (translation will be used if not specified):

import { configuration } from 'modiffy';
import i18n from './i18n';

configuration.usei18n(i18n, 'modiffy');

Credits

Built by following this article: https://betterprogramming.pub/how-to-create-and-publish-react-typescript-npm-package-with-demo-and-automated-build-80c40ec28aca