base-elements-react

Fully customizable React UI elements library

Documentation

Components

Install

npm install --save base-elements-react

Usage

Importing component

Import any component from 'base-elements-react'.

Import css file separately

import React, { Component } from 'react'

import Button from 'base-elements-react'
import 'base-elements-react/dist/index.css'

class Example extends Component {
  render() {
    return <Button>Click Here<Button>
  }
}

Using custom theme

Use custom themes by wrapping components with ThemeWrapper.

You can pass theme jsons to ThemeWrapper component.

The theme json creates css variables on your root element. These variables are then referred throughout the library.

These css variables do not replace existing root variables. So if required css variables are already set in the root element, then this approach can be skipped.

import React from 'react';

import 'base-elements-react/dist/index.css';
import { Button, ThemeWrapper } from 'base-elements-react/dist';

const themes = [
  {
    id: 'light',
    vars: {
      colors: {
        primaryColor: '#29B6F6',
        primaryColorHover: '#03A9F4',
        primaryColorDisabled: '#4FC3F7',
        primaryColorBackground: '#E1F5FE'
      }
    }
  }
];

const App = () => {
  return (
    <ThemeWrapper themes={themes} currentThemeId='light'>
      <Button>Click Here</Button>
    </ThemeWrapper>
  );
};

Default theme

{
  "id": "default",
  "vars": {
    "colors": {
      "fontColor": "#000",
      "fontColorLight": "#222",
      "fontColorLighter": "#555",
      "fontColorInverted": "#FFFFFF",
      "primaryColor": "#00BCD4",
      "primaryColorHover": "#0097A7",
      "primaryColorDisabled": "#80DEEA",
      "primaryColorBackground": "#B2EBF2",
      "secondaryColor": "#607D8B",
      "secondaryColorHover": "#546E7A",
      "secondaryColorDisabled": "#90A4AE",
      "dangerColor": "#F44336",
      "dangerColorHover": "#D32F2F",
      "dangerColorDisabled": "#E57373",
      "neutralColor": "#FFFFFF",
      "neutralColorHover": "#F5F5F5",
      "codeBackgroundColor": "#aeaeae40",
      "shadowColor": "#00000030",
      "shadowColorHeavy": "#00000040",
      "stateSuccessColor": "#4CAF50",
      "stateNeutralColor": "#607D8B",
      "stateErrorColor": "#F44336",
      "textFieldBorderColor": "#88888888"
    },
    "spacings": {
      "padding": "12px",
      "paddingSmall": "8px",
      "paddingLarge": "16px",
      "margin": "12px",
      "marginSmall": "8px",
      "marginLarge": "16px",
      "borderRadius": "4px",
      "gap": "12px",
      "gapSmall": "8px",
      "gapSmaller": "4px",
      "gapLarge": "16px",
      "gapLarger": "24px"
    },
    "others": {
      "shadowDims": "0 0 6px 0",
      "shadowDimsLight": "0 0 3px 0",
      "shadowDimsHeavy": "0 0 10px 0",
      "labelFontWeight": "normal",
      "requiredMarker": "*",
      "textFieldBorderWidth": "1px",
      "textFieldBorderWidthFocus": "2px",
      "checkboxWidth": "16px",
      "checkboxWidthLarge": "24px",
      "headingMargin": "0 0 0.67em",
      "paragraphMargin": "0"
    }
  }
}

Components

Docs

Button

Renders styled html <button> element

import React, { Component } from 'react';

import { Button } from 'base-elements-react';
import 'base-elements-react/dist/index.css';

class Example extends Component {
  render() {
    return (
      <Button onClick={() => console.log('Button clicked')}>Click Here</Button>
    );
  }
}

Props

Accepts all html <button> props such as onClick, className etc.

| Name | Possible Values | Default Value | Description | | ---------- | --------------------------------------------- | ------------- | ---------------------------------- | | appearance | 'primary', 'secondary' , 'danger' | 'primary' | Appearance of the button | | variation | 'plain', 'outline' , 'plainWithPadding' | undefined | Appearance variation of the button | | disabled | true, false | false | Make the button disabled |

Extended Components

• ClickableIcon

  Variation of Button component which has appearance as 'secondary', variation as 'plainWithPadding' and has padding of var(--paddingSmall)

Text

import React, { Component } from 'react';

import { Text } from 'base-elements-react';
import 'base-elements-react/dist/index.css';

class Example extends Component {
  render() {
    return <Text>A block text</Text>;
  }
}

Props

| Name | Possible Values | Default Value | Description | | --------- | --------------------------------------------------------------- | ------------- | ------------------------- | | element | 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span' | 'p' | Type of element to render | | variation | 'strong', 'emphasis', 'subdued', 'code', 'auto' | auto | Variation of the text |

Extended Components

• PageTitle

  Variation of Text component which has element as 'h1'

• SectionHeading

  Variation of Text component which has element as 'h2'

• SubSectionHeading

  Variation of Text component which has element as 'h3'

• ComponentTitle

  Variation of Text component which has element as 'h3'

• InlineText

  Variation of Text component which has element as 'span'

• InlineCode

  Variation of Text component which has variation as 'code'

import React, { Component } from 'react';

import {
  Text,
  PageTitle,
  SectionHeading,
  SubSectionHeading,
  InlineCode,
  VerticalStack
} from 'base-elements-react';
import 'base-elements-react/dist/index.css';

class Example extends Component {
  render() {
    return (
      <VerticalStack>
        <PageTitle>New Page</PageTitle>
        <SectionHeading>Component Details</SectionHeading>
        <SubSectionHeading>Button</SubSectionHeading>
        <Text>
          Button is a styled <InlineCode>&lt;button&gt;</InlineCode> element
        </Text>
      </VerticalStack>
    );
  }
}

FormField

Renders styled html <div> element with label, error and children.

import React, { Component } from 'react';

import { FormField } from 'base-elements-react';
import 'base-elements-react/dist/index.css';

class Example extends Component {
  render() {
    return (
      <FormField label={'Render a labeled input'}>
        <input />
      </FormField>
    );
  }
}

Props

| Name | Possible Values | Default Value | Description | | ------------- | ----------------------------------------- | ------------- | ----------------------------------- | | label | any string | '' | Label for the field | | labelPosition | 'top', 'right' , 'bottom', 'left' | 'top' | Position of the label | | error | any string | '' | Error to be displayed for the field | | required | true, false | false | If the form field is reuqired |

Input

Renders styled html <input> element

import React, { useState } from 'react';

import { Input } from 'base-elements-react';
import 'base-elements-react/dist/index.css';

function Example() {
  const [value, setValue] = useState();
  return <Input value={value} onChange={(e) => setValue(e.target.value)} />;
}

TextArea

Renders styled html <textarea> element

import React, { useState } from 'react';

import { TextArea } from 'base-elements-react';
import 'base-elements-react/dist/index.css';

function Example() {
  const [value, setValue] = useState('');
  return <TextArea value={value} onChange={(e) => setValue(e.target.value)} />;
}

TextField

Formfield with child element as Input or TextArea component.

import React, { useState } from 'react';

import { TextField } from 'base-elements-react';
import 'base-elements-react/dist/index.css';

function Example() {
  const [value, setValue] = useState('');
  return (
    <TextField
      label='Enter your name'
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

Props

Accepts all FormField props - label, labelPosition and error

| Name | Possible Values | Default Value | Description | | --------- | --------------- | ------------- | ---------------------------------------------------- | | multiline | true, false | false | Renders textarea if true, otherwise renders an input |

Checkbox

Renders styled html <input> element with type='checkbox'

import React, { useState } from 'react';

import { Checkbox } from 'base-elements-react';
import 'base-elements-react/dist/index.css';

function Example() {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox
      checked={checked}
      onChange={(e) => setChecked(e.target.checked)}
    />
  );
}

Props

Accepts all input props

| Name | Possible Values | Default Value | Description | | ----------- | --------------------- | ------------- | -------------------- | | checked | true, false | false | Checked state | | sizeVariant | 'normal', 'large' | 'normal' | Size of the checkbox |

CheckboxField

Checkbox component wrapped in FormField

import React, { useState } from 'react';

import { CheckboxField } from 'base-elements-react';
import 'base-elements-react/dist/index.css';

function Example() {
  const [checked, setChecked] = useState(false);

  return (
    <CheckboxField
      checked={checked}
      onChange={(e) => setChecked(e.target.checked)}
      label='This is a checkbox'
    />
  );
}

Props

Accepts all FormField and Checkbox props

Select

Renders a select dropdown. Does not use the native html select element.

import React, { useState } from 'react';

import {
  Select,
  SelectOption,
  HorizontalStack,
  Text
} from 'base-elements-react';
import 'base-elements-react/dist/index.css';

function Example() {
  const [value, setValue] = useState();

  return (
    <Select
      value={value}
      onValueChange={setValue}
      placeholder={'Select something?'}
    >
      <SelectOption value='op1'>Option 1 as string</SelectOption>
      <SelectOption value='op2'>Option 2 as string</SelectOption>
      <SelectOption value='star'>
        <HorizontalStack itemsVerticalAlignment='center'>
          <Text>
            Option with <Text variation='emphasis'>component</Text>
          </Text>
        </HorizontalStack>
      </SelectOption>
    </Select>
  );
}

Props

Accepts all input props

| Name | Possible Values | Default Value | Description | | ------------- | ----------------------- | ------------- | -------------------------------------------------------------- | | onValueChange | (value) => {} | (value) => {} | Callback function when a value is selected | | value | current selected value | first option | Currently selected value | | placeholder | any string or ReactNode | null | Rendered as first item in the option list. Selected by default |

Card

A container with shadow and padding

import React from 'react';

import { Card } from 'base-elements-react';
import 'base-elements-react/dist/index.css';

function Example() {
  return <Card>A block text</Card>;
}

Props

| Name | Possible Values | Default Value | Description | | --------- | ----------------------------- | ------------- | ---------------------------- | | elevation | 'low', 'normal', 'high' | 'normal' | Type of element to render | | noPadding | true, false | false | Removes card padding if true |

Popover

A floating container and its controller

mport React, { useState } from "react";

import { Popover, Button } from "base-elements-react";
import "base-elements-react/dist/index.css";

function Example() {
  const [open, setOpen] = useState(false);
  const toggleOpen = () => setOpen(!open);
  const close = () => setOpen(false);
  return (
    <Popover
      anchor={<Button onClick={toggleOpen}>Toggle Popover</Button>}
      open={open}
      onOutsideClick={close}
      xLocation="snap_left_edge"
      yLocation="bottom"
    >
      Hello!
    </Popover>
  );
}

Props

| Name | Possible Values | Default Value | Description | | -------------- | ------------------------------------------------------------------------------ | ------------- | ---------------------------------------------------------------------------------------------------- | | anchor | ReactNode | undefined | The react component which triggers popover on click | | open | true, false | false | Shows popover container if true | | onOutsideClick | () => {} | | A callback function when user clicks outside the component. You can choose to toggle the open prop | | xLocation | 'snap_left_edge', 'center', 'snap_right_edge' | 'center' | Location on x axis to render the popover | | elevation | 'top', 'top_cover_anchor', 'center', 'bottom_cover_anchor', 'bottom' | 'center' | Location on y axis to render the popove | | xOffset | any number | 0 | offsets the popover by pixels to the right | | yOffset | any number | 0 | offsets the popover by pixels to the bottom |

Table

import React, { Component } from 'react';

import {
  Table,
  TableHead,
  TableRow,
  TableBody,
  TableCell
} from 'base-elements-react';
import 'base-elements-react/dist/index.css';

class Example extends Component {
  render() {
    return (
      <Table hasRowDivider>
        <TableHead>
          <TableRow>
            <TableCell>Sr. no.</TableCell>
            <TableCell>Planet</TableCell>
            <TableCell>Distance from sun</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow>
            <TableCell>1</TableCell>
            <TableCell>Mercury</TableCell>
            <TableCell>46.098 million km</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>2</TableCell>
            <TableCell>Venus</TableCell>
            <TableCell>107.78 million km</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>3</TableCell>
            <TableCell>Earth</TableCell>
            <TableCell>149.48 million km</TableCell>
          </TableRow>
          <TableRow>
            <TableCell>4</TableCell>
            <TableCell>Mars</TableCell>
            <TableCell>219.16 million km</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    );
  }
}

Props

| Name | Possible Values | Default Value | Description | | ---------------- | --------------- | ------------- | --------------------------------------------------------------------------------------- | | hasBodyBorder | true, false | false | Shows border around the body | | hasRowDivider | true, false | false | Shows divider between all rows except top of first row and bottom of last row | | hasColumnDivider | true, false | false | Shows divider between all columns except lelft of first column and right of last column | | headerCentered | true, false | false | Centers content of all header cells | | fullWidth | true, false | false | makes width as 100% |

Extended Components

• TableDataCell

  Table cell that specifically renders 'td' element

• TableHeaderCell

  Table cell that specifically renders 'th' element

• TableHeadRow

  Renders as `{children}

HeaderTable

Variant of Table component

import React, { Component } from 'react';

import {
  HeaderTable,
  TableHeadRow,
  TableRow,
  TableCell
} from 'base-elements-react';
import 'base-elements-react/dist/index.css';

class Example extends Component {
  render() {
    return (
      <HeaderTable
        hasRowDivider
        header={
          <TableHeadRow>
            <TableCell>Sr. no.</TableCell>
            <TableCell>Planet</TableCell>
            <TableCell>Distance from sun</TableCell>
          </TableHeadRow>
        }
      >
        <TableRow>
          <TableCell>1</TableCell>
          <TableCell>Mercury</TableCell>
          <TableCell>46.098 million km</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>2</TableCell>
          <TableCell>Venus</TableCell>
          <TableCell>107.78 million km</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>3</TableCell>
          <TableCell>Earth</TableCell>
          <TableCell>149.48 million km</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>4</TableCell>
          <TableCell>Mars</TableCell>
          <TableCell>219.16 million km</TableCell>
        </TableRow>
      </HeaderTable>
    );
  }
}

Props

| Name | Possible Values | Default Value | Description | | ------ | -------------------------------------------- | ------------- | ------------------------------ | | header | TableHeadRow or TableHead component node | undefined | Renders as header of the table |

Modal

A container with shadow and padding

import React, { useState } from 'react';

import { Button, Modal, ModalHeader } from 'base-elements-react';
import 'base-elements-react/dist/index.css';

export function Example() {
  const [open, setOpen] = useState(false);
  return (
    <Modal open={open} onClose={() => setOpen(false)}>
      <ModalHeader
        addCloseAction
        title='lorem ipsum text'
        onClose={() => setOpen(false)}
      >
        <Button variation='plain'>Save</Button>
      </ModalHeader>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
      eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
      in culpa qui officia deserunt mollit anim id est laborum.
    </Modal>
  );
}

Props

| Name | Possible Values | Default Value | Description | | --------------------------- | --------------------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | title | any string | '' | Title of the modal. This renders a ModalHeader component . | | titleElement | 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span' | 'p' | Type of element to render for title | | open | true, false | false | Shows modal if true | | noPadding | true, false | false | Removes card padding if true | | onClose | () => {} | | A callback function when user clicks close action icon or clicks outside the component or presses escape button | | disallowCloseOnOutsideClick | true, false | false | If true, modal does not call props.onClose function if user clicks outside the modal | | disallowCloseOnEscape | true, false | false | If true, modal does not call props.onClose function if user presses 'Escape' button on keyboard | | addFloatingCloseAction | true, false | false | If true, a clickable close icon is added on the modal. When user clicks this icon, props.onClose function is called | | floatingCloseActionLocation | 'left', 'right' | 'right' | Location of floating close action button on the modal | | floatingCloseActionXOffset | number | 0 | Offset the floating close icon in horizontal direction | | floatingCloseActionYOffset | number | 0 | Offset the floating close icon in vertical direction | | addFloatingCloseAction | true, false | false | If true, a clickable close icon is added on the modal header. When user clicks this icon, props.onClose function is called. The icon is only added in the header generated for title. The icon is not added if you explicitly add ModalHeader as a child of Modal. In that case, please add onClose prop to ModalHeader component |

Link

Renders styled html <a> element

import React from 'react';

import { Link } from 'base-elements-react';
import 'base-elements-react/dist/index.css';

export function Example() {
  // const [open, setOpen] = useState<boolean>(false);
  return (
    <Link href='https://www.example.com' target='_blank'>
      Go to example
    </Link>
  );
}

function MyAnchor(props) {
  return (
    <a className='hello' {...props}>
      {props.children}
    </a>
  );
}

export function ExampleTwo() {
  // const [open, setOpen] = useState<boolean>(false);
  return (
    <Link
      href='https://www.example.com'
      component={MyAnchor}
      variation='filled'
      target='_blank'
    >
      Go to example
    </Link>
  );
}

Props

Accepts all html <a> props such as href.

| Name | Possible Values | Default Value | Description | | ---------------- | -------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | | appearance | 'primary', 'secondary' , 'danger' | 'primary' | Appearance of the link element | | variation | 'plain', 'outline', 'plainWithPadding', 'filled' | plain | Appearance variation of the link element | | underline | true, false | false | Show default underline on anchor tag | | underlineOnHover | true, false | false | Show default underline on anchor tag on hover | | component | Any React component | undefined | Link will render this component instead of default html anchor tag. This can be used to render react router's Link component with this Link component styles |

License

MIT © shmshrivastava