mutter-test-package v0.0.6
mutter-test-package
This is a test react package created by @asxyzp which is to be primarily used for demostrating the process of development and publishing of react packages.
Available React Components
1. <Badge/>
Utility: Creating a badge component which consists of an icon such as mailbox or archive with the content or badge describing the number of items in it.
Import statement:
import {Badge} from 'hello-world-package';
Props:
id (STRING) Id of the badge component icon (STRING) Bootstrap icon class value for the badge icon content (NUMBER) Badge content which shows numerical associate with the badge component iconClass (STRING) Class value for icon element of the badge component badgeClass (STRING) Class value for the badge content containerClass (STRING) Class value for the container containing both icon & content of badge component iconStyle (OBJECT) Styles for the badge icon badgeStyle (OBJECT) Styles for the badge content containerStyle (OBJECT) Styles for the container containing both icon & content of badge component
Example
<Badge
icon="bi bi-archive-fill"
content={1}
containerClass="m-3 d-inline-flex align-items-start"
iconClass='bg-dark text-light h4 p-1 rounded'
badgeClass='p-1 bg-danger text-light rounded small d-flex justify-content-center align-items-center'
containerStyle={{ height: "fit-content", width: "fit-content" }}
iconStyle={{ height: "fit-content", width: "fit-content" }}
badgeStyle={{ height: "1.5em", width: "1.5em", marginLeft: "-10px", marginTop: "-10px" }} />
2. <Button/>
Utility: Creating a button component to display buttons.
Import statement:
import {Button} from 'hello-world-package';
Props:
id (STRING) Id of the button component classVal (STRING) Class value for button component style (OBJECT) Styles for the button component text (STRING) Text inside the button
Example
<Button classVal="m-3 p-1 ps-5 pe-5 fw-bold rounded bg-dark text-light lead shadow" style={{border: "0px", outline: "0px"}} text="Hello"/>
Available Scripts
npm start
To test the package's output, you can run npm start which runs the app in the development mode and shows the two components (e.g. Badge & Button) on the screen. Open http://localhost:3000 to view it in your browser.