{"id":19343842,"url":"https://github.com/vihangpatel/react-placemoulder","last_synced_at":"2025-04-23T04:36:02.757Z","repository":{"id":40764600,"uuid":"268697019","full_name":"vihangpatel/react-placemoulder","owner":"vihangpatel","description":"React Place Moulder uses existing component structure to render loading skeletons. React place moulder is more of a philosophy rather than actual package.","archived":false,"fork":false,"pushed_at":"2023-01-06T07:45:37.000Z","size":7850,"stargazers_count":49,"open_issues_count":17,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-01T18:18:32.689Z","etag":null,"topics":["placeholder","placeholder-skeleton","react"],"latest_commit_sha":null,"homepage":null,"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/vihangpatel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-02T04:01:06.000Z","updated_at":"2024-02-05T17:24:17.000Z","dependencies_parsed_at":"2023-02-05T16:00:47.901Z","dependency_job_id":null,"html_url":"https://github.com/vihangpatel/react-placemoulder","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vihangpatel%2Freact-placemoulder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vihangpatel%2Freact-placemoulder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vihangpatel%2Freact-placemoulder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vihangpatel%2Freact-placemoulder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vihangpatel","download_url":"https://codeload.github.com/vihangpatel/react-placemoulder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223910048,"owners_count":17223591,"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","placeholder-skeleton","react"],"created_at":"2024-11-10T03:39:35.783Z","updated_at":"2024-11-10T03:39:36.471Z","avatar_url":"https://github.com/vihangpatel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":" # React PlaceMoulder\nReact Place Moulder uses existing component structure to render loading skeletons with very minimal code changess.\nClick here for [Live Demo](https://react-placemoulder.netlify.app) and for code click [Example Repo Link](https://github.com/vihangpatel/react-placemoulder-examples)\nThis is more of a philosophy which can be extended to any framework in Frontend.\n\n![Class adding Gif](docs/images/stencil.gif?raw=true \"Title\")\n\n![Class adding Gif](docs/images/stencil-1.gif?raw=true \"Title\")\n\n### Installation\nInstall using `npm install --save  react-placemoulder`\n\n### Pre-Requisite\n- Works well with `dumb` or `presentational` component.\n- Make sure you do not have any analytics/tracking code in the component\n\n### Features\n  - Uses exisiting component structure ( provided Component is dumb/presentational).\n  - While Modifying Component, skeleton is not required to be modified as per new design.\n\n### How it works\n  -  Class name `stensil` ( spelling mistake is intentional to avoid accidental clash with correct spelling ) is required to be added to render stencil when the data is being loaded.\n  -  Create a dummy data or Schema and pass it to your component.\n  -  To render loading state of the list, use `StencilList` HOC, or to show loading state of individual component, use `Stencil` HOC. See props table for accetable props.\n\n### StencilList\n| prop               | type    |    Description                                                   |\n|--------------------|---------|------------------------------------------------------------------|\n| data*  | object   | `data` is dummy or representational data which will be used to determine the dummy space occupied by the DOM element |\n| length               | number   |                      Number of repetitive skeletons required to fill in the placeholder list                                             |\n| schema*          | object   | If `data` is not provided, provide schema of the props required by `Component`. |\n| Component   | ReactElement\u003cany\u003e   | `Component` for which we want to generate skeleton on the fly        |\n\n### StencilWrapper\n\n| prop               | type     |       Description                                                 |\n|--------------------|----------|-------------------------------------------------------------------|\n| Children           | ReactElement\u003cany\u003e  | Component on which loading state is required                |\n| repeat             | number   | Number of times to repeat the skeleton placeholder |\n\n### Stencil\n\n| prop               | type     |       Description                                                 |\n|--------------------|----------|-------------------------------------------------------------------|\n| Children           | ReactElement\u003cany\u003e  | Component on which loading state is required                |\n\nAvailable selectors to achieve desired result. Add required class name along with other classes where you want to show loading state.\n\n### To override or extend visuals, extend following classes or add some rules here and use it in your app:\n| Selector Class | Description |\n|-|-|\n| stensil | To get loading state |\n| stensil-ignore | To ignore the component in the loading state. Won't show stencil over there |\n| stensil-dark | Dark background, useful in image loaders |\n| stensil-svg | To get the exact shape of the SVG as a stencil loader |\n| stensil-para | To show the paragraph, can be used where there is short description used |\n\nYou can have your own classes to override visuals in loading behaviour.\nFor that wrap your css under the `.enable-stensil` selector and just use it in your application.\n\n### createObjectFromSchema - method\n- Takes object schema as an argument and returns dummy component props JSON. It supports nested object structure as well.\n\n## Example\nFollow simple following steps\n#### 1. Importing\nRefer Live Examples for more clarity\n```\nimport {\n  Stencil,\n  StencilList,\n  StencilWrapper,\n  createObjectFromSchema\n} from \"react-placemoulder\";\n\n.... your code ...\n```\n\n#### 2. To render loading state of the whatsapp card, add `stensil` class name to the appropriate DOM element for data to be rendered.\n\n```\nconst WhatsAppCard = props =\u003e (\n  \u003cdiv className=\"whatsapp-card\"\u003e\n    \u003cdiv className=\"whatsapp-avatar stensil\"\u003e\n      \u003cimg src={props.avatar} alt={props.name} className=\"stensil-ignore\" /\u003e\n    \u003c/div\u003e\n    \u003cdiv className=\"whatsapp-chat-frame\"\u003e\n      \u003cspan className=\"whatsapp-name stensil\"\u003e{props.name}\u003c/span\u003e\n      \u003cp className=\"whatsapp-last-chat stensil\"\u003e{props.lastChat}\u003c/p\u003e\n    \u003c/div\u003e\n    \u003cdiv className=\"whatsapp-right-block\"\u003e\n      \u003cdiv className=\"stensil\"\u003e{props.lastSeen}\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n);\n```\n#### 3. Invoke HOC when the data is being loaded. `wData` is similar in schema with actual data. Its nothing but props object for the `WhatsAppCard`. Alternatively you can also use schema.\n```\n    {loading ? (\n          \u003cStencilList length={3} Component={WhatsAppCard} data={wData} /\u003e\n        ) : (\n          [...Array(3)].map((_, index) =\u003e (\n            \u003cWhatsAppCard key={index} {...wData} /\u003e\n          ))\n        )}\n```\n\nOR using `StencilWrapper` which accepts only one child\n\n```\n    {loading ? (\n          \u003cStencilWrapper repeat={3}\u003e\n              \u003cWhatsAppCard {...wData} /\u003e\n          \u003c/StencilWrapper\u003e\n        ) : (\n          ... render your cards\n        )}\n```\n\n#### 4. Provide `data` or `schema`. Here `data` takes precedence over schema.\nExample of schema: Where numbers against prop key indicated average length ( decided by you ) to show the stencil.\n```\n{\n  name: 12,\n  lastChat: 65,\n  lastSeen: 10\n};\n```\n\nWhere your dummy data can be like this:\n```\n{\n  name: \"Mr Developer\",\n  avatar:\n    \"https://clipartstation.com/wp-content/uploads/2017/11/software-developer-clipart-5.jpg\",\n  lastChat: \"I created stencils !!!\",\n  lastSeen: \"12:30 PM\"\n};\n```\n\n### More Skeleton Examples\n\u003cp style=\"display:flex;flex-direction:column;\"\u003e\n  \u003cimg src=\"docs/images/1.png?raw=true\" width=\"356\" height=\"356\"\u003e\n  \u003cimg src=\"docs/images/2.png?raw=true\" width=\"356\" height=\"356\"\u003e\n  \u003cimg src=\"docs/images/3.png?raw=true\" width=\"356\" height=\"356\"\u003e\n\u003c/p\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvihangpatel%2Freact-placemoulder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvihangpatel%2Freact-placemoulder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvihangpatel%2Freact-placemoulder/lists"}