https://github.com/darkpurple141/showcase-components
A small React library for displaying previews/iframes/images of applications and websites inside browser and phone-like containers.
https://github.com/darkpurple141/showcase-components
component-library react typescript
Last synced: 2 months ago
JSON representation
A small React library for displaying previews/iframes/images of applications and websites inside browser and phone-like containers.
- Host: GitHub
- URL: https://github.com/darkpurple141/showcase-components
- Owner: DarkPurple141
- Created: 2019-03-22T11:27:38.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T17:54:59.000Z (almost 2 years ago)
- Last Synced: 2025-04-30T03:44:01.138Z (6 months ago)
- Topics: component-library, react, typescript
- Language: TypeScript
- Size: 1.08 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Showcase Components (React)
[![npm Version][bd_npm_shield_url]][bd_npm_url]
[](https://travis-ci.com/DarkPurple141/showcase-components)
[bd_npm_url]: http://www.npmjs.org/package/showcase-components
[bd_npm_shield_url]: https://img.shields.io/npm/v/showcase-components.svg
This is a small `React` component library to be used as containers for showcasing projects, portfolio work, guides etc that are better presented in the context of a phone or browser window.
For reference they look like this:
[](https://alhinds.com/showcase-components)
## Installation
```bash
npm i --save showcase-components
```
## Configuring with Webpack
This package is meant to be used with a build tool to aid resolution of CSS modules. Webpack or similar with `style-loader` & `css-loader` will be required to use this package (although in most cases these packages should already be in use in most react build configurations).
## Reasoning
This entire package compressed is under 2K. An alternative `.png` type wrapper will be larger _and_ it won't be dynamic. Yay fast loading and customisation!
The API for the components is pretty simple.
## Example
```jsx
import React, { Component } from 'react'
import { Laptop } from 'showcase-components'
const MyAwesomePreview = (props) => (
)
// OR
const MyAwesomePreviewAsImg = (props) => (
)
// OR
const MyAwesomePreviewAsJsx = (props) => (
)
```
See the typings file for a fuller description of properties that are exposed.
## Issues
Please feel free to lodge an issue at the public git repository.