Intro
Automatically show a well-fitting placeholder for dumb component while its content is loading. [Demo here]
What is the meaning of the word
hold
in this project? It's means keep(hold) the shape of the dumb component if it without content. You can also see it as an action which make the dumb component has a placeholder.
Install
npm install --save react-hold
Usage
// make the bulit-in component has a placeholderconst P = // make the composite component has a placeholderconst MyComponentWithPlaceholder = Component { super...args thisstate = title: '' data: null } { return <div className="my-class-name"> <P> thisstatetitle </P> <MyComponentWithPlaceholder data=thisstatedata /> </div> }
If you want to make your component has a placeholder by default, try decorator.
@Component { return <div className="add-some-style"> thispropsdata </div> }
API
hold(Component, condition, [defaultHolder], [holderDefaultProps])
Create a higher-order component to manage the original component and placeholder component.
Arguments
Component
(Component) [Required]: The target(original) component, should be a dumb(presentational) component.condition
(Function) [Required]: The condition function will be called with argumentsprops
andprevProps
. It needs to returns a boolean value to judge whether to show the placeholder component(true
means yes). If returnsfalse
, the higher-order component will remove the placeholder component, and show the original component.defaultHolder
(Component) [Optional]: The default placeholder component. Default Fill.holderDefaultProps
(Object) [Optional]: The default props of placeholder component.
Returns
(Component): A higher-order component, control the display of original component and placeholder component.
The higher-order component supports these props:
holder
(Component) [Optional]: The placeholder component, will override the default placeholder.holderProps
(Object) [Optional]: The props of placeholder component, will shallow override the default props.props
(Object) [Optional]: The alias ofholderProps
.innerRef
(Function|String) [Optional]: The ref of original component.
The rest props will be passed to the original component.
holdify(condition, [defaultHolder], [holderDefaultProps])
The handy decorator made by hold
API.
Placeholders
You can import the built-in placeholders from react-hold/holders
, every different placeholders use to display a different content.
Common Props
color
(String) [Optional]: The color of placeholder. Default#eee
.cancelHold
(Function): Invoking this function to cancel hold shape and display the original component. This is injected by the higher-order component, can't be override.targetProps
(Function): The props of the target(original) component. This is injected by the higher-order component, can't be override.children
[Optional]
Fill
This placeholder will display a rectangle.
Props
width
(String|Number) [Optional]: The width of rectangle.height
(String|Number) [Optional]: The height of rectangle.align
(String) [Optional]: If you set a width(such as300
) lower than the real width of original component, the rectangle will not fill in the full area, but you can use this prop to set the alignment. Supportleft
,right
andcenter
. Defaultcenter
.
Square
This placeholder will display a square.
Props
side
(String|Number) [Optional]: the side length of square.align
(String) [Optional]: Similar to the align prop ofFill
.
Circle
This placeholder will display a circle.
Props
diameter
(String|Number) [Optional]: The diameter of circle.align
(String) [Optional]: Similar to the align prop ofFill
.
Text
This placeholder will display a piece of blank text.
Props
length
(Number) [Optional]: The length of text. Default100
.lineHeight
(String|Number) [Optional]: the line height of text. Default2.3
.fontSize
(String|Number) [Optional]: the font size of text. Default'0.7em'
.
Table
This placeholder will display a table.
Props
width
(Number) [Optional]: The width of table.height
(Number) [Optional]: The height of table.cols
(Number) [Optional]: The cols number of table. Default2
.rows
(Number) [Optional]: The rows number of table. Default2
.gap
(Number) [Optional]: The gap between cols and rows. Default2
.align
(String) [Optional]: Similar to the align prop ofFill
.
License
MIT