@front-app-react/elements

Elements Component

The @front-app-react/elements package is a collection of ReactJS components designed for use in web applications. styled-components are used for styles. These components are easy to use and highly customizable, making them ideal for a wide range of projects. @front-app-react/theme is used to manage the theme

Demo

demo for using demo-front-app-react

Installing

npm i @front-app-react/elements

Components

List of components used:

• Button - Button allow users to take actions, and make choices, with a single tap.
• Card - Cards contain content and actions about a single subject.
• Divider - A divider is a thin line that groups content in lists and layouts.
• Dropdown - A Dropdown can be used to display some content on top of another.
• Modal - The modal component provides a solid foundation for creating dialogs, dropdown, lightboxes, or whatever else.
• Overlay - The Overlay component narrows the user's focus to a particular element on the screen.
• Table - A fast react data table and react data grid.
• Tabs - Tabs make it easy to explore and switch between different views.
• Typography - Use typography to present your design and content as clearly and efficiently as possible.

The Gist

They use React context to hook into the parent state/methods.

import { ElementsProvider } from "@front-app-react/elements";
    <ElementsProvider theme={theme} styles={styles}>
        ...otherCode
    </ElementsProvider>

ThemeProvider Props

props	description
theme*	props @front-app-react/theme
styles*	Basic styling for props elements

prop styles

Properties are not required

property	value
btn	Button Props
card	Card Props
divider	Divider Props
dropdownMenu	DropdownMenu Props
table	Table Props
tab	Tab Props
typography	Typography Props

props button component

Button allow users to take actions, and make choices, with a single tap.

• $textColor (optional): a partial type of ThemeColor interface.
• $bgColor (optional): a partial type of ThemeColor interface.
• $borderColor (optional): a partial type of ThemeColor interface.
• $isCircle (optional): a boolean that indicates whether the button should be circular.
• $isIcon (optional): a boolean that indicates whether the button should display an icon.
• $isBlock (optional): a boolean that indicates whether the button should take up the full width of its container.
• $isActive (optional): a boolean that indicates whether the button is currently active or not.
• $sizing (optional): a string literal type that can be either "sm" or "lg".
• $withoutColor (optional): a boolean that indicates whether the button should have any colors applied to it.
• $withoutActions (optional): a boolean that indicates whether any actions should be applied to the button.
• $boxShadow (optional): a CSS property that defines the shadow effect of the button.

props card component

Cards contain content and actions about a single subject.

• $border (optional): a partial type of Border interface.
• $bgColor (optional): a partial type of Color interface.
• $width (optional): a CSS property that defines the width of the box.
• $height (optional): a CSS property that defines the height of the box.
• $radius (optional): a CSS property that defines the border radius of the box.
• $boxShadow (optional): a CSS property that defines the shadow effect of the box.

props divider component

Cards contain content and actions about a single subject.

• $bgColor (optional): a partial type of Color interface.
• $width (optional): a CSS property that defines the width of the box.
• $height (optional): a CSS property that defines the height of the box.

props overlayBg component

The Overlay component narrows the user's focus to a particular element on the screen.

• type of ThemeColor interface

props modal component

The modal component provides a solid foundation for creating dialogs, dropdown, lightboxes, or whatever else.

• dialog (optional):
  • $paddingTop (optional): a string that defines the top padding of the dialog.
  • $paddingBottom (optional): a string that defines the bottom padding of the dialog.
• content (optional): a type of CustomCSSProperties that defines the style of the content.
• heading (optional): a type of CustomCSSProperties that defines the style of the heading.

props table component

A fast react data table and react data grid.

• $thProps (optional): a type of CustomCSSProperties that defines the style of the content.
• $btnThProps (optional): a type of CustomCSSProperties that defines the style of the content.
• $tdProps (optional): a type of CustomCSSProperties that defines the style of the heading.

props tab component

Tabs make it easy to explore and switch between different views.

• data is an array of objects, each of which has a title and content property that can be of any React Node type.
• getActive (optional): is an optional callback function that takes an active index as a parameter.
• defaultActiveIndex (optional): is an optional number that specifies the default active index.
• styleCard (optional): a type of CustomCSSProperties style .
• styleBtnTab (optional): a type of CustomCSSProperties style .

props typography component

Use typography to present your design and content as clearly and efficiently as possible.

• $fontSize (optional): a string that defines the font size of the text.
• $fontFamily (optional): a string that defines the font family of the text.
• $textColor (optional): a partial type of Color interface.
• $fontWeight (optional): a string that defines the font weight of the text.
• $textTransform (optional): which is of the same type as the textTransform property of the CSSProperties interface.
• $lineHeight (optional): is a string that specifies the line height of the text.

props dropdown component

A Dropdown can be used to display some content on top of another.

Type CustomCSSProperties

which extends the CSSProperties interface.

• $textColor (optional): a partial type of ThemeColor interface.
• $bgColor (optional): a partial type of ThemeColor interface.
• $borderColor (optional): a partial type of ThemeColor interface.

Type Border

• direction (optional): a type that defines a Record with top,right,bottom,left as keys and an object as value. The object has the following properties:
  • size (optional): a number that defines the size of the border.
  • color (optional): a type of ThemeColor that defines the color of the border.
  • style (optional): a string that defines the style of the border.
• size (optional): a number that defines the size of the border.
• color (optional): a type of ThemeColor that defines the
• style (optional): a string that defines the style of the border.