Modiffy
Meaningful objects diff
Provides a React component to easily view all meaningful differences between 2 objects.
Installation
npm install modiffyUsage
<Diff oldValue={{ name: 'diff' }} newValue={{ name: 'modiffy' }} expanded={true} />Supported features
| Features | Since | |
|---|---|---|
| ✓ | Custom formatters |  |
| ✓ | Ignored properties |  |
| ✓ | i18n |  |
| ✓ ✓ |
Object preview Deep 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