ms-commons-react v1.0.0

Prerequisitos

Se deben instalar las siguientes dependencias como prerrequisito:

• react: 16.8.6+
• react-dom: 16.8.6+

ms-commons-react

Proyecto con los componentes básicos para el desarrollo de una aplicación con React para los proyectos web desarrollados por Modusoftware.

Guía

• Instalación
• Componentes
  • <Modal />
  • <ConfirmModal />
• Internacionalización

Instalación

npm install ms-commons-react --save

Componentes

<Modal />

import { Modal } from 'ms-commons-react';

Componente utilizado para mostrar modales, recibe las siguientes propiedades para personalizar la información y estilo:

La propiedad buttons debe tener la siguiente estructura:

buttons: [
  {
    label: string - required,
    className: string - optional,
    onClick: function - required
  }
]

<ConfirmModal />

import { ConfirmModal } from 'ms-commons-react';

Componente utilizado para mostrar modales para confirmación de procesos, se utiliza el componente Modal para crear su visualización, recibe las siguientes propiedades para personalizar la información y estilo:

Las propiedades acceptButton y cancelButton deben tener la siguiente estructura:

buttons: [
  {
    label: string - optional,
    className: string - optional
  }
]

Se encuentrá disponible la función confirmModal para ejecutar el componente <ConfirmModal /> por medio de una función:

import { confirmModal } from 'ms-commons-react';
...
handleOpenModal = () => {
  confirmModal({
    onCancel: () => console.log("Cancel click"),
    onAccept: () => console.log("Accept click"),
    title: "Example",
    body: () => <p>Example body</p>,
    acceptButton: {
      label: 'Accept',
        className: 'btn btn-primary'
    }
  });
}
...

Internacionalización

import { i18n } from 'ms-commons-react';

var properties = {
  ...
};
i18n(properties);

Función encargada de configurar la internacionalización a partir de archivos ubicados en la carpeta public/locales/[ns]/translation.json en la raíz del proyecto:

my-app
└── public
   └── locales
       ├── en
       │   └── translation.json
       ├── es
       │   └── translation.json
       └── fr
           └── translation.json

La función recibe los propiedades de configuración las cuales pueden ser consultadas aquí

License

Create React App is open source software licensed as MIT.