Breaking News: Grepper is joining You.com. Read the official announcement!

custom placeholder javascript react

Mishan Khatri answered on September 15, 2022 Popularity 3/10 Helpfulness 1/10

answer custom placeholder javascript react

custom placeholder javascript react

Comment

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>
    </>
  );
};

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: www.npmjs.com

Tags: javascript placeholder

Link to this answer
Share Copy Link

Contributed on Sep 15 2022

Mishan Khatri

0 Answers Avg Quality 2/10

custom placeholder javascript react

Contents

More Related Answers

custom placeholder javascript react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.