Viacheck-logs-app NPM

Demo Template

TODO: Short component description.

Demo Template Image

Installation

npm i -S -E @viamericas/demo-react-to-npm-package

Please review webpack.config.js on externals property to check what packages need to install separately because they are not included in the package.

Usage

Import package

import Demo from '@viamericas/demo-react-to-npm-package';

TODO: Describe all special configurations, functions, states and/or property usages.

Create a function to show changes

const onHandleChange = value => {
  console.log(value);
};

Component implementation

<Demo
  inputA="{1}"
  inputB="{20}"
  onHandleChange="{onHandleChange}"
  className={className} {/* css wrapper */}
  t={t || loadTranslation()} {/* i18n */}
/>

inputA, inputB and onHandleChange are required.
t (i18 translation) and className are optional.

example

<Demo inputA="{1}" inputB="{20}" onHandleChange="{onHandleChange}" />

Language

const { t } = useTranslation('translation');

Check dev-test/locales folder for an example.

Styles

This component does not have custom styles.

Check src/styles folder for component styles.

Developer

Hi! It's a guide where you going to can know how packaging project React, build and publish in a repository npm.

Structure directory

Path	Description
`__test__`	Contain the logic of the files of testings
`build`	This folder contains the transpiled code. It is auto-generated by the build command.
`coverage`	This folder contains the code coverage. It is auto-generated by the command.
`dev-test`	This folder contains the development environment.
`doc`	Contains the project's documentation like user story, user case and diagrames.
`node_modules`	These directory is generated automatic by use 'npm install'.
`src`	Contain your logic of application/component.
`src/assets`	Contain your resources like images, fonts...
`src/core/*`	Contain your all rules business.
`src/core/hooks`	Contain your custom hooks.
`src/index.js`	It's application's start

How to publish the project

Follow the steps below:

npm login
npm build
npm publish or npm publish --scope=<organization_name>
npm unpublish --scope=<organization_name> --force

--scope is only necessary if the package name in the package.json file does not have the company name as a prefix. Always the company name must be with the "@-2 at the beginning and a separator "/" at the end.

{
  "name": "@viamericas/demo-react-to-npm-package"
}

Validate weight of package

You can run the next commands to see the result of the bundle :

npm run build:debug
npm run analizedependences

Need to have installed source-map-explorer globally.

npm install -g source-map-explorer