Theo-components
an npm package to create a customizable product details as Card, simplified TextField to be used with Formik also to show validation errors shown from yup validation
Developed using Typescript and Optimised for React-18+.
Can be used to
- Create customised card for products from an API call
- Control button action based on the user defined functions
- Display a Texfield and show error messages based on Formik validation
Features
- Displays a popup message when isLoggedin flag is false can be used to restrict user to add contents only after login.
- Title, Description,Price, Discount price details can be passed as a props.
- Styling for price based on Price and DiscPrice values
- Can add custom function to Increase count and Decrease count of the product.
- Can display an image in the card with border.
Tech
This package uses below projects to work properly:
- [ReactJS] - HTML enhanced for web apps!
- [MaterialUI] - to display buttons in the cards
- [React-Bootstrap] - to display Card Header,Footer,Body.
- [Formik] - to display message text box based on formik validation
Installation
Install the dependencies and devDependencies and start the server.
npm i theo-components
For development environments...
npm i theo-components --save-dev
Example
ProductCard Component
We can import the component with below import statement
import { ProductCard } from "theo-components";
We can declare the type of parameters as an interface like below
interface IPost {
image: string;
title: string;
category: string;
description: string;
userId?: number;
price: number;
discPrice: number;
grossWeight: number;
netWeight: number;
units?: number;
id: number;
isLoggedin: boolean;
getItemQuantity: (id: number) => number;
increaseCartQuantity: (id: number) => void;
decreaseCartQuantity: (id: number) => void;
removeFromCart: (id: number) => void;
setNotLoggedinPopup: () => void;
}
- In above declaration props such as image, title, category, description, userId, price, discPrice, grossWeight, netWeight,units, id, can be provided from API call
- Props such as isLoggedin, getItemQuantity, increaseCartQuantity, decreaseCartQuantity, removeFromCart, setNotLoggedinPopup can be provided across the component from a global state management which is accessible across the application.
-- getItemQuantity - is a function provides the quantity with id as input
-- increaseCartQuantity - is a function to increase quantity with id as input -- decreaseCartQuantity - is a function to decrease quantity with id as input -- removeFromCart - is a function to remove from cart -- setNotLoggedinPopup - to display message when user is attempting to add product to cart
item.isLoggedin = isLoggedin;
item.getItemQuantity = getItemQuantity;
item.increaseCartQuantity = increaseCartQuantity;
item.decreaseCartQuantity = decreaseCartQuantity;
item.removeFromCart = removeFromCart;
item.setNotLoggedinPopup = setNotLoggedinPopup;
return <ProductCard {...item} />;
We can add additional functions to the argument as like above and pass them as props to the component
FormTextField Component
We can import the component with below import statement
import {FormTextField} from "theo-components";
We can use this component in Formik Field as like below
<Field
name="name"
label="Name"
data-testid="test_username"
size="small"
component={FormTextField}
/>