Demo Template
TODO: Short component description.
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
andonHandleChange
are required.
t
(i18 translation) andclassName
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
ornpm publish --scope=<organization_name>
npm unpublish --scope=<organization_name> --force
--scope
is only necessary if the package name in thepackage.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