{"id":22865356,"url":"https://github.com/toplan/react-hold","last_synced_at":"2025-04-06T16:14:07.546Z","repository":{"id":85627697,"uuid":"94009609","full_name":"toplan/react-hold","owner":"toplan","description":":cactus:Automatically show a well-fitting placeholder for dumb component while its content is loading","archived":false,"fork":false,"pushed_at":"2017-07-04T14:34:25.000Z","size":148,"stargazers_count":342,"open_issues_count":4,"forks_count":11,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-30T14:11:15.444Z","etag":null,"topics":["placeholder","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/toplan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-11T14:24:54.000Z","updated_at":"2024-07-15T17:40:56.000Z","dependencies_parsed_at":"2023-04-01T15:20:40.740Z","dependency_job_id":null,"html_url":"https://github.com/toplan/react-hold","commit_stats":{"total_commits":36,"total_committers":1,"mean_commits":36.0,"dds":0.0,"last_synced_commit":"71eabd0ccffb9b762b3ea757c86ff072a07d0fad"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toplan%2Freact-hold","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toplan%2Freact-hold/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toplan%2Freact-hold/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toplan%2Freact-hold/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/toplan","download_url":"https://codeload.github.com/toplan/react-hold/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247509237,"owners_count":20950232,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["placeholder","react"],"created_at":"2024-12-13T11:36:41.420Z","updated_at":"2025-04-06T16:14:07.522Z","avatar_url":"https://github.com/toplan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Intro\n\nAutomatically show a well-fitting placeholder for dumb component while its content is loading. [[Demo here]](http://toplan.github.io/react-hold/)\n\n[![build status](https://travis-ci.org/toplan/react-hold.svg?branch=master)](https://travis-ci.org/toplan/react-hold)\n[![codecov](https://codecov.io/gh/toplan/react-hold/branch/master/graph/badge.svg)](https://codecov.io/gh/toplan/react-hold)\n[![npm version](https://img.shields.io/npm/v/react-hold.svg)](https://www.npmjs.com/package/react-hold)\n[![npm downloads](https://img.shields.io/npm/dm/react-hold.svg)](https://www.npmjs.com/package/react-hold)\n\n![react-hold-article](http://toplan.github.io/img/react-hold-article.gif)\n\n- [APIs](#api)\n- [Placeholders](#placeholders)\n- [Plugins](#plugins)\n\n\u003e 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.\n\n# Install\n\n```\nnpm i --save react-hold\n```\n\n# Usage\n\n```js\nimport React from 'react'\nimport { render } from 'react-dom'\nimport hold from 'react-hold'\nimport MyComponent from './path/to/MyCompnent'\n\n// make the bulit-in component has a placeholder\nconst P = hold('p', (props) =\u003e !props.children)\n\n// make the composite component has a placeholder\nconst MyComponentWithPlaceholder = hold(MyComponent, (props) =\u003e !props.data)\n\nclass App extends React.Component {\n  constructor(...args) {\n    super(...args)\n    this.state = {\n      title: '',\n      data: null,\n    }\n  }\n\n  render() {\n    return (\n      \u003cdiv className=\"my-class-name\"\u003e\n        \u003cP\u003e{ this.state.title }\u003c/P\u003e\n        \u003cMyComponentWithPlaceholder data={this.state.data} /\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nrender(\u003cApp /\u003e, document.body)\n```\n\nIf you want to make your component has a placeholder by default, try decorator.\n\n```js\nimport { holdify } from 'react-hold'\n\n@holdify((props) =\u003e !props.data)\nclass MyComponent extends React.Component {\n  render() {\n    return \u003cdiv className=\"add-some-style\"\u003e{ this.props.data }\u003c/div\u003e\n  }\n}\n```\n# API\n\n```js\nimport hold, { holdify } from 'react-hold'\n```\n\n### hold(Component, condition, [defaultHolder], [holderDefaultProps])\n\nThis is a default API, and it's a higher-order component.\nUse it to create a Hold component as a manager to manage the original component and [placeholder](#placeholders) component.\n\n##### Arguments\n\n- `Component` (Component) [Required]: The target(original) component, should be a dumb(presentational) component.\n- `condition` (Function) [Required]: The condition function will be called with arguments `props` and `prevProps`.\nIt needs to returns a boolean value to judge whether to show the placeholder component(`true` means yes).\nIf returns `false`, the Hold component will remove the placeholder component, and show the original component.\n- `defaultHolder` (Component) [Optional]: The default placeholder component. Default [Fill](#fill).\n- `holderDefaultProps` (Object) [Optional]: The default props of placeholder component.\n\n##### Returns\n\n(Component): The Hold component which can automatically control the display of original component and placeholder component.\n\nThe Hold component supports these props:\n- `holder` (Component) [Optional]: The placeholder component, will override the default placeholder.\n- `holderProps` (Object) [Optional]: The props of placeholder component, will shallow override the default props.\n- `props` (Object) [Optional]: The alias of `holderProps`.\n- `innerRef` (Function|String) [Optional]: The ref of original component.\n\nThe rest props will be passed to the original component.\n\n### holdify(condition, [defaultHolder], [holderDefaultProps])\n\nThe handy decorator made by `hold` API.\n\n# Placeholders\n\n```js\nimport { Fill, Square, Circle, Text, Table } from 'react-hold/holders'\n```\n\nYou can import the built-in placeholders from `react-hold/holders`, every different placeholders will display a different content.\n\n##### Common Props\n- `color` (String) [Optional]: The color of placeholder. Default `#eee`.\n- `cancelHold` (Function): Invoking this function to manually cancel hold the shape of the original component.\nThis is injected by the Hold component, can't be override.\n- `targetProps` (Function): The props of the target(original) component.\nThis is injected by the Hold component, can't be override.\n- `children` [Optional]\n\n### Fill\n\nThis placeholder will display a rectangle.\n\n##### Props\n- `width` (String|Number) [Optional]: The width of rectangle.\n- `height` (String|Number) [Optional]: The height of rectangle.\n- `align` (String) [Optional]: If you set a width(such as `300`) lower than the real width of original component,\nthe rectangle will not fill in the full area, but you can use this prop to set the alignment.\nSupport `left`, `right` and `center`. Default `center`.\n\n### Square\n\nThis placeholder will display a square.\n\n##### Props\n- `side` (String|Number) [Optional]: the side length of square.\n- `align` (String) [Optional]: Similar to the align prop of `Fill`.\n\n### Circle\n\nThis placeholder will display a circle.\n\n##### Props\n- `diameter` (String|Number) [Optional]: The diameter of circle.\n- `align` (String) [Optional]: Similar to the align prop of `Fill`.\n\n### Text\n\nThis placeholder will display a piece of blank text.\n\n##### Props\n- `length` (Number) [Optional]: The length of text. Default `100`.\n- `lineHeight` (String|Number) [Optional]: the line height of text. Default `2.3`.\n- `fontSize` (String|Number) [Optional]: the font size of text. Default `'0.7em'`.\n\n### Table\n\nThis placeholder will display a table.\n\n##### Props\n- `width` (Number) [Optional]: The width of table.\n- `height` (Number) [Optional]: The height of table.\n- `cols` (Number) [Optional]: The cols number of table. Default `2`.\n- `rows` (Number) [Optional]: The rows number of table. Default `2`.\n- `gap` (Number) [Optional]: The gap between cols and rows. Default `2`.\n- `align` (String) [Optional]: Similar to the align prop of `Fill`.\n\n# Plugins\n\n- [react-hold-animation](https://github.com/toplan/react-hold-animation):\nA higher-order component be use for add animation to the placeholder.\n\n\u003e More cool plugins is in the todo list.\n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoplan%2Freact-hold","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftoplan%2Freact-hold","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoplan%2Freact-hold/lists"}