qagency-components v1.0.0
Shared UI Components
Shared UI Components for Universal Aviation Training Web Applications.
Setup
Install dependencies:
yarn install
Compile library to
dist/
:yarn run start
This command continues to watch for changes in
src/
module and recompiles the library automatically.
Example project
Library components is tested and showcased in example project using next steps:
Navigate to example folder from the project root:
cd example
Install dependencies for example project:
yarn install
Run example/showcase project in browser and see components in action:
yarn run start
Usage from example project
Components can be imported from library's dist/
folder using absolute import:
import {
TextHeadline1,
Logo,
TextInput
} from "components";
import "components/dist/index.css";
const Example = () => (
<>
<TextHeadline1>Headline</TextHeadline1>
<Logo />
<TextInput />
</>
);
Integration to other projects
Link
uat-components
library to yarn from the library's project root:yarn link
Library name is defined in
package.json
.Link library's
react
module to yarn:cd node_modules/react yarn link
This step is required because Invalid Hook Call Warning exception will be raised since library uses react-hooks.
Position to the root of the project where you want to integrate the library.
Link
uat-components
library from yarn:yarn link uat-components
Link
react
from yarn:yarn link react
Usage in other projects
Components can be imported from library using library name:
import {
TextHeadline1,
Logo,
TextInput
} from "uat-components";
import "uat-components/dist/index.css";
const MyProject = () => (
<>
<TextHeadline1>Headline</TextHeadline1>
<Logo />
<TextInput />
</>
);
About
This project is created using create-react-library, CLI for creating modern React libraries.
4 years ago