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.