2.0.1 • Published 1 year ago

@front-app-react/elements v2.0.1

Weekly downloads
-
License
-
Repository
-
Last release
1 year ago

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

propsdescription
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.

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.

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.
2.0.1

1 year ago

2.0.0

1 year ago

1.1.11

1 year ago

1.1.9

2 years ago

1.1.8

2 years ago

1.1.7

2 years ago

1.1.6

2 years ago

1.1.5

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.1.10

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.1.2

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago