SimplifyUIReact SimplifyUIReact is a library of simple and reusable React components that can help you make your project more streamlined and efficient. It provides easy-to-use components that can be used to build modern and responsive user interfaces.

Installation You can install SimplifyUIReact using npm:

bash Copy code npm install simplifyuireact Usage To use SimplifyUIReact in your project, simply import the component(s) you need:

javascript Copy code import { Typography, CardList,Image,Container,Navbar,Card,Navmobile,Button } from 'simplifyuireact'; Then, use the component(s) in your React code:

javascript Copy code const App = () => { return (

); }; Components SimplifyUIReact provides the following components:

ypography Component A reusable Typography component that allows you to easily style text in your React applications.

Props The Typography component accepts the following props:

text (string, required): the text to be displayed. variant (string, required): the variant of the text, which determines the font size and weight. Accepts one of the following values: h1, h2, h3, body1, body2, p. textColor (string): the color of the text. variantStyles (object): an object containing additional styles to be applied to the text, based on the variant. direction (string): the direction of the text. Accepts either "ltr" (left-to-right) or "rtl" (right-to-left). Default Variants The component has a set of default variants that determine the font size and weight:

h1: font size 32px, font weight bold. h2: font size 24px, font weight bold. h3: font size 20px, font weight bold. body1: font size 16px, font weight normal. body2: font size 14px, font weight normal. p: font size 14px, font weight normal. You can override these default variants by passing a variantStyles prop.

   CardList Component

The CardList component displays a list of cards based on the given items. Each card in the list contains an image, title and description.

Props items (required): An array of objects containing the details of each card. Each object should contain a cardId, cardImage, cardTitle and cardDesc property. breakPoints (required): An object containing the number of cards to be displayed in a row for different screen sizes. textColor (optional): The text color of the card. cardBg (optional): The background color of the card. containerBg (optional): The background color of the card list container. direction (optional): The direction of the card list container.

Usage

const items = [ { cardId: 1, cardImage: { type: "image", value: "https://example.com/image1.jpg", }, cardTitle: "Card Title 1", cardDesc: "Description for Card 1", }, { cardId: 2, cardImage: { type: "image", value: "https://example.com/image2.jpg", }, ]

<CardList items={items} // getting the items breakPoints={{ desk: 4, tab: 3, mobile: 1 }} // display them textColor="#333" cardBg="#f5f5f5" containerBg="#d9d9d9" direction="ltr" // change the text direction />

Button Component

The Button component is a reusable React button component that can be customized with various props to fit different use cases. It accepts the following props:

Props text (string, required): The text to be displayed on the button. variant (string, required): The style of the button. Can be one of "text", "contained", or "outlined". textColor (string, optional): The color of the text on the button. Defaults to "#323232". backgroundColor (string, optional): The background color of the button. Defaults to "#42A5F5" for the "contained" variant, and "none" for the other variants. variantStyles (object, optional): An object containing custom styles for each variant of the button. This can be used to override the default styles for a particular variant. disabled (boolean, optional): Whether the button is disabled or not. Defaults to false. onClick (function, optional): The function to be called when the button is clicked.

const MyButton = () => { const handleClick = () => { console.log("Button clicked!"); };

return ( <> </> )

 Card Component

A React component that displays a card with an image, title and description.

Props title (string, required): The title of the card. description (string, required): The description of the card. image (object, required): An object containing the type, value and serviceId (optional) of the image to display. direction (string, optional, default: "rtl"): The direction of the text, can be "rtl" or "ltr". cardBg (string, optional, default: "#ffffff"): The background color of the card. textColor (string, optional, default: "#333333"): The color of the text. breakPoints (object, optional, default: { sm: 576, md: 768, lg: 992, xl: 1200 }): An object containing the screen breakpoints for the description text to adjust its font size.

const image = { type: "jpg", value: "https://example.com/image.jpg", };

return ( --> )

Container Component Description A flexible React container component that allows you to specify a wide range of properties for layout and styling.

Props display (string, optional): Determines whether to use flex or grid layout. Defaults to "flex". justifyContent (string, optional): Defines the alignment along the main axis. Works for both flex and grid layout. alignItems (string, optional): Defines the alignment along the cross axis. Works for both flex and grid layout. flexWrap (string, optional): Determines if the flex items should wrap or not. Works for flex layout only. gridTemplateColumns (string, optional): Defines the number and size of columns in a grid container. Works for grid layout only. gridTemplateRows (string, optional): Defines the number and size of rows in a grid container. Works for grid layout only. gridColumnGap (string, optional): Defines the size of the gap between columns in a grid container. Works for grid layout only. gridRowGap (string, optional): Defines the size of the gap between rows in a grid container. Works for grid layout only. backgroundColor (string, optional): Specifies the background color of the container. flexDirection (string, optional): Specifies the direction of the main axis in a flex container. Defaults to "row". breakPoints (object, required): Defines the screen breakpoints for the container to adjust its layout and styles. containerStyle (object, optional): Specifies additional inline styles to apply to the container.

<Container display="flex" justifyContent="center" alignItems="center" flexDirection="column" breakPoints={{ tab: 768, mobile: 480 }} >

Navbar Component

The Navbar component renders a navigation bar with options for a desktop and mobile view.

Props bgColor: (string) Background color of the navigation bar in desktop view. Defaults to white.

bgMobileColor: (string) Background color of the navigation bar in mobile view. Defaults to white.

textColor: (string) Text color of the navigation bar. Defaults to black.

items: (array) An array of objects that represents the navigation items. Each object should have an id (number), title (string), and link (string) property. This prop is required.

logo: (string) A URL string that points to the logo image. If not provided, the navigation bar will center its items.

position: (string) CSS position property value for the navigation bar. Defaults to an empty string.

justifyContent: (string) CSS justify-content property value for the navigation bar. It accepts the same values as CSS justify-content property: center, end, space-between, space-evenly, and start. Defaults to space-around.

const items = [ { id: 1, title: "Home", link: "/" }, { id: 2, title: "About", link: "/about" }, { id: 3, title: "Contact", link: "/contact" }, ];

return ( );