https://github.com/yashrajbharti/placeholder-component
A customizable web component for developers and designers to reserve space for future components. https://www.npmjs.com/package/placeholder-component
https://github.com/yashrajbharti/placeholder-component
css html js npm web-components
Last synced: 4 months ago
JSON representation
A customizable web component for developers and designers to reserve space for future components. https://www.npmjs.com/package/placeholder-component
- Host: GitHub
- URL: https://github.com/yashrajbharti/placeholder-component
- Owner: yashrajbharti
- License: mit
- Created: 2024-11-15T03:09:43.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-15T03:15:47.000Z (over 1 year ago)
- Last Synced: 2025-12-23T08:59:11.032Z (6 months ago)
- Topics: css, html, js, npm, web-components
- Language: JavaScript
- Homepage: https://yashrajbharti.github.io/placeholder-component/
- Size: 5.86 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Placeholder Component
A 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.
## Why Use Placeholder Component?
Over 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.
## Features
- **Color:** Customize the color of the placeholder rectangle.
- **Height:** Define the height of the placeholder.
- **Width:** Define the width of the placeholder.
- **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.
## Installation
Simply use npm or unpkg to install:
```bash
npm install placeholder-component
```
```html
```
then import using:
```js
import "placeholder-component";
```
## Usage
Simply use as web components:
```html
```
## Attributes
| Attribute | Description | Default Value |
|-----------|-------------|---------------|
| `color` | Sets the background color of the placeholder rectangle. | `#ccc` |
| `height` | Defines the height of the placeholder. | Varies based on `mimic` value |
| `width` | Defines the width of the placeholder. | Varies based on `mimic` value |
| `mimic` | Sets the placeholder type (e.g., "footer", "navbar", "article"). This determines the HTML tag used and applies default dimensions and layouts. | `div` |
### Mimic Values and Defaults
- `footer` - Uses `` tag with a default height of `500px` and width of `100%`.
- `navbar` - Uses `` tag with `position: fixed` at the top, a default height of `70px`, and width of `100%`.
- `article` - Uses `` tag with a default height of `700px`.
- `section` - Uses `` tag with a default height of `100vh`.
- Other values - Uses a generic `
` tag with default height and width.
## License
This project is licensed under the MIT License. See the `LICENSE` file for more details.
## Contributing
Contributions are welcome! Please submit a pull request or open an issue to suggest improvements or new features.
## Repository
Check out the [GitHub repository](https://github.com/yashrajbharti/placeholder-component) for more details and examples.