{"id":20489229,"url":"https://github.com/yashrajbharti/placeholder-component","last_synced_at":"2026-02-05T04:33:12.833Z","repository":{"id":262926442,"uuid":"888802479","full_name":"yashrajbharti/placeholder-component","owner":"yashrajbharti","description":"A customizable web component for developers and designers to reserve space for future components. https://www.npmjs.com/package/placeholder-component","archived":false,"fork":false,"pushed_at":"2024-11-15T03:15:47.000Z","size":6,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-23T08:59:11.032Z","etag":null,"topics":["css","html","js","npm","web-components"],"latest_commit_sha":null,"homepage":"https://yashrajbharti.github.io/placeholder-component/","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/yashrajbharti.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":"2024-11-15T03:09:43.000Z","updated_at":"2024-11-21T05:42:26.000Z","dependencies_parsed_at":"2024-11-15T04:18:54.079Z","dependency_job_id":"9272bd55-0015-415f-8dec-a3605bf261d9","html_url":"https://github.com/yashrajbharti/placeholder-component","commit_stats":null,"previous_names":["yashrajbharti/placeholder-component"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yashrajbharti/placeholder-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yashrajbharti%2Fplaceholder-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yashrajbharti%2Fplaceholder-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yashrajbharti%2Fplaceholder-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yashrajbharti%2Fplaceholder-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yashrajbharti","download_url":"https://codeload.github.com/yashrajbharti/placeholder-component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yashrajbharti%2Fplaceholder-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29111882,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-05T03:44:17.043Z","status":"ssl_error","status_checked_at":"2026-02-05T03:44:12.077Z","response_time":65,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["css","html","js","npm","web-components"],"created_at":"2024-11-15T17:11:48.966Z","updated_at":"2026-02-05T04:33:12.820Z","avatar_url":"https://github.com/yashrajbharti.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Placeholder Component\n\nA customizable placeholder web component for developers and designers to visualize empty spaces where future components will be built. This component is helpful in collaborative development environments, allowing team members to allocate visual space for in-progress elements, such as navigation bars, footers, and articles.\n\n## Why Use Placeholder Component?\n\nOver time, designers and developers often leave empty spaces for components yet to be completed. Designers may duplicate existing elements for layout purposes, but there's no equivalent solution for developers. This component provides a standardized placeholder to visualize these spaces, aiding in layout planning and design collaboration.\n\n## Features\n\n- **Color:** Customize the color of the placeholder rectangle.\n- **Height:** Define the height of the placeholder.\n- **Width:** Define the width of the placeholder.\n- **Mimic:** Use this attribute to specify the type of placeholder (e.g., \"footer\", \"navbar\", \"article\"), which sets default dimensions and behavior according to the component being represented.\n\n## Installation\n\nSimply use npm or unpkg to install:\n\n```bash\nnpm install placeholder-component\n```\n\n```html\n\u003cscript src=\"https://unpkg.com/placeholder-component@1.0.0/placeholder-component.js\"\u003e\u003c/script\u003e\n```\n\nthen import using:\n\n```js\nimport \"placeholder-component\";\n```\n\n## Usage\n\nSimply use as web components:\n\n```html\n\u003cplaceholder-component mimic=\"navbar\" color=\"gray\" height=\"70px\"\u003e\u003c/placeholder-component\u003e\n\u003cplaceholder-component mimic=\"footer\" color=\"lightgray\" height=\"500px\"\u003e\u003c/placeholder-component\u003e\n\u003cplaceholder-component mimic=\"article\" color=\"darkgray\"\u003e\u003c/placeholder-component\u003e\n```\n\n## Attributes\n\n| Attribute | Description | Default Value |\n|-----------|-------------|---------------|\n| `color`   | Sets the background color of the placeholder rectangle. | `#ccc` |\n| `height`  | Defines the height of the placeholder. | Varies based on `mimic` value |\n| `width`   | Defines the width of the placeholder. | Varies based on `mimic` value |\n| `mimic`   | Sets the placeholder type (e.g., \"footer\", \"navbar\", \"article\"). This determines the HTML tag used and applies default dimensions and layouts. | `div` |\n\n### Mimic Values and Defaults\n\n- `footer` - Uses `\u003cfooter\u003e` tag with a default height of `500px` and width of `100%`.\n- `navbar` - Uses `\u003cnav\u003e` tag with `position: fixed` at the top, a default height of `70px`, and width of `100%`.\n- `article` - Uses `\u003carticle\u003e` tag with a default height of `700px`.\n- `section` - Uses `\u003csection\u003e` tag with a default height of `100vh`.\n- Other values - Uses a generic `\u003cdiv\u003e` tag with default height and width.\n\n## License\n\nThis project is licensed under the MIT License. See the `LICENSE` file for more details.\n\n## Contributing\n\nContributions are welcome! Please submit a pull request or open an issue to suggest improvements or new features.\n\n## Repository\n\nCheck out the [GitHub repository](https://github.com/yashrajbharti/placeholder-component) for more details and examples.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyashrajbharti%2Fplaceholder-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyashrajbharti%2Fplaceholder-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyashrajbharti%2Fplaceholder-component/lists"}