@lite-v3/shared-components

A collection of shared components

Installation

Install deps

# Use pnpm
pnpm add @lite-v3/shared-components

# Use npm
npm i @lite-v3/shared-components

# Use yarn
yarn add @lite-v3/shared-components

Modules

Grid

A component that helps you to layout your page. Documentation: https://tokopedia.atlassian.net/wiki/spaces/PL/pages/928484100/Grid

DeferComponent

A performance utility component that delay mounting your component. Takes inspiration from Twitter Web Performance usecase.

DeferFrame

Defer mounting child component with the help of requestAnimationFrame, effectively mounting the component in the next frame.

Usage:

import DeferFrame from '@lite-v3/shared-components/DeferFrame';
// OR
import { DeferFrame } from '@lite-v3/shared-components';

return (
  <DeferFrame id="my-component" enabled>
   {your_component}
  </DeferFrame>
)

DeferIdle

Defer mounting child component with the combination of requestAnimationFrame and requestIdleCallback, effectively mounting the component in the next frame if there's an idle time. If the browser doesn't support requestIdleCallback, it will fall back to setTimeout.

Usage:

import DeferIdle from '@lite-v3/shared-components/DeferIdle';
// OR
import { DeferIdle } from '@lite-v3/shared-components';

return (
  <DeferIdle id="my-component" enabled>
    {your_component}
  </DeferIdle>
)

DeferLoad

defer mounting child component until window load is fired.

Usage:

import DeferLoad from '@lite-v3/shared-components/DeferLoad';
// OR
import { DeferLoad } from '@lite-v3/shared-components';

return (
  <DeferLoad id="my-component" enabled>
   {your_component}
  </DeferLoad>
)

Code By WPE Team @Tokopedia