@romanwozniak/mlp-ui
v1.4.9
Published
A library of common React components used by the MLP solutions.
Downloads
3
Readme
@gojek/mlp-ui Library
A library of common React components used by the MLP solutions.
Install
yarn add @gojek/mlp-ui
Packages
auth
Contains React context (AuthContext
) and necessary components (AuthContextProvider
and PrivateRoute
) for implementing views that require a user to be authenticated to access them.
components
Generic UI components used by MLP apps (such as header, breadcrumbs, project dropdown etc.).
hooks
Custom React hooks:
useApi
- generic hook for interacting with REST API.
Example:
const DummyButton = () => {
const [response, sendRequest] = useApi(
"https://run.mocky.io/v3/7533b0dd-df1b-4f3d-9068-a6ca9a448b8d",
{
method: "POST",
body: JSON.stringify({ hello: "world" }),
headers: { "Content-Type": "application/json" }
}, // request options
{}, // optional, AuthContext, if the API requires authentication
{}, // initial value of the response.data
false // whether or not to send the request to the API immediately
);
// Send request explicitly
const onClick = sendRequest;
// Log response payload when request succeeded
useEffect(() => {
const { data, isLoading, isLoaded, error } = response;
console.log(data);
}, [response]);
return <button onClick={onClick}>Hello World!</button>;
};
useMlpApi
- custom React hook to talk tomlp-api
. It utilizesuseApi
hook under the hook, but pre-populates it with theAuthContext
and modifiesendpoint
value to prefix it with the root URL where MLP-api is accessible.
Example:
const [response, fetch] = useMlpApi(
`/projects/${projectId}/environments`,
{}, // request options
[], // initial value of the response.data
true // whether or not to send the request to the API immediately
);
useToggle
- custom React hook for defining a boolean value that can only be switched on and off. To be used in pop-overs, modals etc, where it can represent whether to show or hide a component.
Example:
const [isShowing, toggle] = useToggle(
true // initialState – optional, default false
);
useEffect(() => {
if (isShowing) {
toggle();
}
console.log(isShowing);
}, [isShowing]);
Output:
true; // initialState
false; // calling `toggle()` switched the state
providers
Context providers that supply config/data to children components:
MlpApiContextProvider
ApplicationsContextProvider
ProjectsContextProvider
CurrentProjectContextProvider
utils
Misc utils.
Available Scripts
Dev Server
yarn start
Production Bundle
yarn build
Run Lint
yarn lint
To let the linter to try fixing observed issues, run:
yarn lint:fix
Link Library Locally
It can be handy, to link this library locally, when you are working on the application, that has @gojek/mlp-ui
as a dependency. For doing it, run:
yarn run link
This will link @gojek/mlp-ui
as well as react
and react-dom
locally, so it can be used in your application. Then run following commands from your project's directory:
cd <your app project>
yarn link @gojek/mlp-ui
yarn link react
yarn link react-dom
When you no longer want to have a local link of @gojek/mlp-ui
and want to resolve the library from the npm registry, run:
cd </path/to/mlp-iu/packages/lib>
yarn run unlink
and then:
cd <your app project>
yarn unlink @gojek/mlp-ui
yarn unlink react
yarn unlink react-dom