Components

Components and their respective properties

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 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.

<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

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