npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@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 to mlp-api. It utilizes useApi hook under the hook, but pre-populates it with the AuthContext and modifies endpoint 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:


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