Skip to content

Mishankhatri/react-khatra-placeholder

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Status License: MIT

A react component library for creating skeleton placeholders

#

Installation

  npm install react-khatra-placeholder

Documentation


Requirement


Quick Start

After installation

Import KhatraPlaceholder component from the react-khatra-placeholder.

import { KhatraPlaceholder } from "react-khatra-placeholder";
export const YourContentPage = () => {
  // your content loading logic.
  const [isLoading, setIsLoading] = useState(false);
  return (
    <>
      <KhatraPlaceholder
        isLoading={isLoading}
        type={"ParagraphPlaceholder"}
        delay={300}
        animateWave
      >
        <div>Your Beautiful content.</div>
      </KhatraPlaceholder>
    </>
  );
};

For Creating CustomPlaceholders import necessary components from the react-khatra-placeholder.

import {
  KhatraPlaceholder,
  PCardContainer,
  PCard,
  PBlock,
  PInlineContainer,
  PLine,
} from "react-khatra-placeholder";
const CustomPlaceholder = () => {
  return (
    <>
      {/* to hold more than one PCard. */}
      <PCardContainer>
        {/* base component of placeholder, control animation of placeholder from here.*/}
        <PCard w="400px" h="400px" animateWave>
          {/* creates rectangular block of given height and border radius.*/}
          <PBlock h="50%" br="8px" />
          {/* base component for creating paragraph lines.*/}
          <PInLineContainer gap="0.1rem" br="3px">
            <PLine h="0.8rem" /> {/* creates lines, just like in paragraphs.*/}
            <PLine w="70%" h="0.8rem" />
            <PLine w="80%" h="0.8rem" />
          </PInLineContainer>
          <PBlock w="30%" h="2rem" br="3px" />
        </PCard>
      </PCardContainer>
    </>
  );
};

export const YourContentPage = () => {
  // your content loading logic.
  const [isLoading, setIsLoading] = useState(false);
  return (
    <>
      <KhatraPlaceholder
        isLoading={isLoading}
        customPlaceholder={<CustomPlaceholder />}
        delay={300}
        animateWave
      >
        <div>Your Beautiful content.</div>
      </KhatraPlaceholder>
    </>
  );
};

Components

KhatraPlaceholder

KhatraPlaceholder is the base container to hold your content, maintain your loading state of your content , place custom placeholders and change animations.

<KhatraPlaceholder>YourContent</KhatraPlaceholder>
Property Type Required Default value Description
isLoading Boolean no false state to either hide or show content
delay Number no 0 to add delay (in milliseconds) between changing state from loading to loaded.(Use to omit fast flicker in faster network devices.)
customPlaceholder React Component no null placeholder to show when content is loading
type String no null type of builtin placeholders provided by the library either of "ListMediaPlaceholder","ProductPlaceholder","ImagePlaceholder","ParagraphPlaceholder"
animateWave Boolean no null to trigger shrimmer animation on placeholders
animateGlow Boolean no null to trigger glow animation on placeholders
style Object no null for custom css styling
className String no null for custom css class names

PCardContainer

PCardContainer is container to hold one or more PCard.

<PCardContainer>{...children}<PCardContainer>
Property Type Required Default value Description
className String no null for custom css class names

PCard

PCard is base container for creating card placeholders.
Only place to control animations, either animateWave or animateGlow.

<PCard>{...children}</PCard>
Property Type Required Default value Description
w String yes null width of PCard
h String yes null height of PCard
br String no "0.75rem" borderRadius of PCard
gap String no null gap between children
animateWave Boolean no null to trigger shrimmer animation on childrens
animateGlow Boolean no null to trigger glow animation on childrens
style Object no null for custom css styling
className String no null for custom css class names

Note: using both animateWave and animateGlow stops animation.

PBlock

PBlock is used for creating placeholders for titles ,images and badges.

<PBlock />
Property Type Required Default value Description
w String no "100%" width of PBlock
h String no "100%" height of PBlock
br String no "0.75rem" borderRadius of PBlock
align String no null to align-self inside PCard, takes either of values flex-start,flex-end & center
rounded Boolean no null to create cicles
style Object no null for custom css styling
className String no null for custom css class names

PInlineContainer

PInlineContainer is parent container to hold PLine component. Without PInlineContainer, PLine cannot be rendered.

<PInlineContainer>{...children}</PInlineContainer>
Property Type Required Default value Description
w String no "100%" width of PInlineContainer
h String no "fit-content" height of PInlineContainer
br String no "5px" borderRadius for each children
gap String no "0.5rem" gap between chilrens PInlineContainer
justify String no null to justify PLines,PBlock inside PInlineContainer takes either of space-between, space-around, space-evenly & centerr
rows Number no null to create given number of rows of PLines
rowsWidth String no null to specify width for given number of 'rows'
rowsHeight String no null to specify height for given number of 'rows'
style Object no null for custom css styling
className String no null for custom css class names

PLine

PLine is used to create placeholders for texts. Used with parent PInLineContainer

<PLine />
Property Type Required Default value Description
w String no "100%" width of PLine
h String no "1rem" height of PLine
br String no null borderRadius
align String no null to align-self inside PInlineContainer, takes either of values flex-start,flex-end & center
style Object no null for custom css styling
className String no null for custom css class names

Builtin Types

type: ParagraphPlaceholder

<ParagraphPlaceholder />
Property Type Required Default value Description
w String no "80%" width of placeholder.
h String no "20%" height of placeholder
br String no "0.25rem" borderRadius
animateWave Boolean no null to trigger shrimmer animation on childrens
animateGlow Boolean no null to trigger glow animation on childrens
rows Number no 7 total rows of lines in paragraph
rowsHeight String no "0.75rem" height of lines in paragraph.
rowsWidth String no "100%" width of lines in paragraph.
style Object no null for custom css styling
className String no null for custom css class names

type: ProductPlaceholder

<ProductPlaceholder />
Property Type Required Default value Description
w String no "20rem" width of placeholder.
h String no "25rem" height of placeholder
br String no "0.25rem" borderRadius
style Object no null for custom css styling
animateWave Boolean no null to trigger shrimmer animation on childrens
animateGlow Boolean no null to trigger glow animation on childrens
className String no null for custom css class names

type: ImagePlaceholder

<ImagePlaceholder />
Property Type Required Default value Description
w String no "25rem" width of placeholder.
h String no "25rem" height of placeholder
br String no "0.25rem" borderRadius
style Object no null for custom css styling
animateWave Boolean no null to trigger shrimmer animation on childrens
animateGlow Boolean no null to trigger glow animation on childrens
className String no null for custom css class names

type: ListMediaPlaceholder

<ListMediaPlaceholder />
Property Type Required Default value Description
w String no "50%" width of placeholder.
h String no "20%" height of placeholder
br String no "0.75rem" borderRadius
style Object no null for custom css styling
animateWave Boolean no null to trigger shrimmer animation on childrens
animateGlow Boolean no null to trigger glow animation on childrens
className String no null for custom css class names

Themes

PThemeProvider

PThemeProvider is the component to pass your theme colors and state. Maintains own theme state with boolean state : darkTheme and handler:handleTheme and defaults to light theme. Access darkTheme, handleTheme via useTheme()

//for providing darkTheme state and handler globally
import { PThemeProvider } from "react-khatra-placeholder";

return (
  <PThemeProvider
    lightModeBackground="orange"
    lightModeColor="brown"
    darkModeBackground="lightgreen"
    darkModeColor="green"
    darkModeShine="lightblue"
  >
    <YourTopParentComponentPage />
  </PThemeProvider>
);
Property Type Required Default value Description
lightModeColor String no DEFAULT_LIGHTMODE_LINE_COLOR light mode color of placeholder lines and blocks.
darkModeColor String no DEFAULT_DARKMODE_LINE_COLOR dark mode color of placeholder lines and blocks.
lightModeBackground String no DEFAULT_LIGHTMODE_BG_COLOR light mode background color of placeholder cards.
darkModeBackground String no DEFAULT_DARKMODE_BG_COLOR light mode background color of placeholder cards.
lightModeShine String no DEFAULT_LIGTHMODE_SHINE light mode shine color of placeholder lines and blocks.
darkModeShine String no DEFAULT_DARKMODE_SHINE light mode shine color of placeholder lines and blocks.

DEFAULT_LIGHTMODE_LINE_COLOR = "#d7d7d7"
DEFAULT_DARKMODE_LINE_COLOR = "#383838"
DEFAULT_LIGHTMODE_BG_COLOR = "#ffffff"
DEFAULT_DARKMODE_BG_COLOR = "#121212"
DEFAULT_LIGTHMODE_SHINE = "#eeeeee"
DEFAULT_DARKMODE_SHINE = "#6d6c6c"

useTheme()

For accessing useTheme() hook:

import { useTheme } from "react-khatra-placeholder";

//example for toggle theme button
const ToggleTheme = () => {
  const { darkTheme, handleTheme } = useTheme();
  return <button onClick={() => handleTheme(!darkTheme)}>Toggle Theme</button>;
};

Custom Cards used in Demo

Profile Card :

#

<PCard w="400px" h="500px" br="12px" animateWave>
  <PBlock w="100%" h="150px" br="12px" align="center" />
  <PInLineContainer justify="center">
    <PBlock
      w="100px"
      h="100px"
      rounded
      align="center"
      style={{
        position: "relative",
        top: "-5rem",
        marginBottom: "-5rem",
        border: "2px solid grey",
      }}
    />
    <PBlock w="75%" h="1rem" align="center" />
    <PBlock w="60%" h="0.8rem" align="center" />
    <PBlock w="60%" h="0.8rem" align="center" />
  </PInLineContainer>
  <PInLineContainer justify="center">
    <PBlock w="40%" h="2rem" />
    <PBlock w="40%" h="2rem" />
    <PBlock w="10%" h="2rem" />
  </PInLineContainer>
  <PInLineContainer gap="0.8rem" justify="center">
    <PLine w="20%" h="100px" />
    <PLine w="20%" h="100px" />
    <PLine w="20%" h="100px" />
    <PLine w="20%" h="100px" />
  </PInLineContainer>
</PCard>

Product Card :

#

<PCard w="320px" h="400px" animateWave>
  <PBlock h="50%" br="12px" />
  <PInLineContainer justify="space-between">
    <PBlock w="30%" h="1.5rem" />
    <PBlock w="20%" h="1.5rem" />
  </PInLineContainer>
  <PInLineContainer gap="0.3rem" br="3px">
    <PLine h="0.8rem" />
    <PLine w="70%" h="0.8rem" />
    <PLine w="80%" h="0.8rem" />
  </PInLineContainer>
  <PBlock w="30%" h="1.8rem" />
</PCard>

List Card :

#

<PCard w="400px" h="400px" animateWave>
  <PInLineContainer gap="1rem">
    <PBlock w="80px" h="80px" br="12px" />
    <PInLineContainer w="60%" style={{ marginTop: "0.5rem" }}>
      <PLine w="100%" h="0.8rem" />
      <PLine w="60%" h="0.8rem" />
    </PInLineContainer>
  </PInLineContainer>
  <PInLineContainer gap="1rem">
    <PBlock w="80px" h="80px" br="12px" />
    <PInLineContainer w="60%" style={{ marginTop: "0.5rem" }}>
      <PLine w="100%" h="0.8rem" />
      <PLine w="60%" h="0.8rem" />
    </PInLineContainer>
  </PInLineContainer>
  <PInLineContainer gap="1rem">
    <PBlock w="80px" h="80px" br="12px" />
    <PInLineContainer w="60%" style={{ marginTop: "0.5rem" }}>
      <PLine w="100%" h="0.8rem" />
      <PLine w="60%" h="0.8rem" />
    </PInLineContainer>
  </PInLineContainer>
  <PInLineContainer gap="1rem">
    <PBlock w="80px" h="80px" br="12px" />
    <PInLineContainer w="60%" style={{ marginTop: "0.5rem" }}>
      <PLine w="100%" h="0.8rem" />
      <PLine w="60%" h="0.8rem" />
    </PInLineContainer>
  </PInLineContainer>
</PCard>

Mobile View :

#

<PCard w="400px" h="720px" animateGlow>
  <PInLineContainer justify="space-between">
    <PBlock w="40%" h="2rem" />
    <PInLineContainer w="20%">
      <PBlock w="2rem" h="2rem" rounded />
      <PBlock w="2rem" h="2rem" rounded />
    </PInLineContainer>
  </PInLineContainer>

  <PInLineContainer justify="space-between">
    <PBlock w="4rem" h="2rem" />
    <PBlock w="4rem" h="2rem" />
    <PBlock w="4rem" h="2rem" />
    <PBlock w="4rem" h="2rem" />
    <PBlock w="4rem" h="2rem" />
  </PInLineContainer>

  <PInLineContainer>
    <PBlock w="2rem" h="2rem" rounded />
    <PLine w="85%" h="2rem" br="18px" />
  </PInLineContainer>

  <PInLineContainer gap="0.8rem">
    <PLine w="22%" h="120px" />
    <PLine w="22%" h="120px" />
    <PLine w="22%" h="120px" />
    <PLine w="22%" h="120px" />
  </PInLineContainer>

  <PInLineContainer>
    <PBlock w="2rem" h="2rem" rounded />
    <PInLineContainer w="50%">
      <PLine w="60%" h="0.8rem" br="3px" />
      <PLine w="40%" h="0.5rem" br="3px" />
      <PBlock w="0.5rem" h="0.5rem" rounded />
    </PInLineContainer>
    <PBlock h="300px" />
  </PInLineContainer>
</PCard>

Details Card :

#

<PCard w="800px" h="400px" gap="1rem" animateGlow>
  <PBlock h="100%" br="12px" />
  <PInLineContainer align="space-between">
    <PBlock w="50%" h="3rem" />
    <PInLineContainer w="30%">
      <PBlock w="3rem" h="3rem" rounded />
      <PBlock w="3rem" h="3rem" rounded />
      <PBlock w="3rem" h="3rem" rounded />
      <PBlock w="3rem" h="3rem" rounded />
    </PInLineContainer>
  </PInLineContainer>
  <PInLineContainer gap="0.8rem" br="3px">
    <PLine h="1rem" />
    <PLine w="70%" h="1rem" />
    <PLine w="80%" h="1rem" />
  </PInLineContainer>
</PCard>

Description Card :

#

<PCard w="400px" h="400px" animateGlow>
  <PBlock h="50%" br="8px" />
  <PInLineContainer gap="0.5rem" br="3px">
    <PLine h="0.8rem" />
    <PLine w="70%" h="0.8rem" />
    <PLine w="80%" h="0.8rem" />
  </PInLineContainer>
  <PBlock w="30%" h="1.8rem" br="3px" />
</PCard>

Authors

Contribution

Feel free to contribute. Happy Coding!