primary-react-components v1.0.10

primary-react-components

A Typescript React-JSX component and CSS/SCSS library targeting Bootstrap with the intention to simplify and standardize the interaction with components.

The documentation for this repository is still being worked-on, but it should be functional and ready to use! Check out the types in each of the components for details on how to use the components.

Getting Started

npm install primary-react-components

Usage

The library contains two primary features: A CSS/SCSS theme, and a complementary React component library.

Theme

//SCSS
import 'primary-react-components/dist/scss/_config.scss';
import 'primary-react-components/dist/scss/theme.scss';

//CSS
import 'primary-react-components/dist/css/_config.css';
import 'primary-react-components/dist/css/theme.css';

JSX/React Components

import {Paragraph, Container} from 'primary-react-components'

Components

Each of the following components will all generally have the following attributes to use:

//Adding your own custom class names to the component 
type className = string | string[];

//Adding your own custom styles to the components
type style = React.CSSProperties;

Some of the components (button, badge, alerts) will also feature additional colors to those found in bootstrap: Purple, Pink, and Orange

Alert

The standard Bootstrap Alert, with a few additional colors: orange, purple, and pink

Usage

<Alert type={'primary'}>
    Your password is invalid
</Alert>

The hideIfEmpty attribute can be used to easily hide the alert if the contents are empty, for example if you're displaying an error message

<Alert type={'error'} hideIfEmpty={true}>
    {errorMessage}
</Alert>

Types

export type AlertProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
    //Hide the alert if the contents are empty
    hideIfEmpty?: boolean,
    type?: (
        'primary' | 'blue' |
        'secondary' |
        'success' | 'green' |
        'danger' | 'red' | 'error' |
        'warning' | 'yellow' |
        'orange' |
        'purple' |
        'pink' |
        'light' |
        'dark'
    )
}

Badge

The standard Bootstrap Badge, with a few additional colors: orange, purple, and pink

Usage

<Badge color={'purple'}>{messageCount}</Badge>

Includes the pill version

<Badge color={'orange'} type={'pill'}>{status}</Badge>

Types

export type BadgeProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    pill?: boolean,
    innerRef?: any,
    title?: string,
    color?: string,
    type?: (
        'primary' | 'blue' |
        'secondary' |
        'success' | 'green' |
        'danger' | 'red' | 'error' |
        'warning' | 'yellow' |
        'orange' | 'purple' |
        'pink' |
        'light' |
        'dark'
        ),
    size?: (
        'xs' | 'extra-small' |
        'sm' | 'small' |
        'lg' | 'large' |
        'xl' | 'extra-large'
        )
}

Box

The box is a simple wrapper of the div element

Usage

<Box style={{padding: '3px', background: 'tomato'}}>
    Your content here
</Box>

Types

export type BoxProps = {
    className?: string | Array<string>,
    style?: React.CSSProperties,
    children?: React.ReactNode,
    shadow?: boolean | 1 | 2 | 3 | 4 | 5,
    title?: string,
    onClick?: () => void,
    onMouseOver?: any,
    onMouseEnter?: any,
    onMouseLeave?: any,
    id?: string
}

BreadcrumbContainer

NOTICE

This component, the container, is used to make up a smarter component: "Breadcrumbs", which automatically generates the values and container in one. Use the Breadcrumbs component instead of this, unless you need some custom functionality beyond the smarter component.

Usage

<Breadcrumb>...</Breadcrumb>

Types

export type BreadcrumbContainerProps = {
    className?: string,
    innerRef?: any,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    withBackground?: boolean
}

BreadcrumbItem

NOTICE

This component, the breadcrumb-item, is used to make up a smarter component: "Breadcrumbs", which automatically generates the values and container in one. Use the Breadcrumbs component instead of this, unless you need some custom functionality beyond the smarter component.

Usage

<BreadcrumbItem onClick={() => navigate('/dashboard')}>Dashboard</BreadcrumbItem>

The breadcrumb item's onclick will be disabled when active is set to true, even if onclick is present

<BreadcrumbItem onClick={() => navigate('/dashboard')} active={true}>Products</BreadcrumbItem>

Types

export type BreadcrumbItemProps = {
    onClick?: () => void,
    href: () => void,
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    active?: boolean
}

Breadcrumbs

The Breadcrumbs is a smart component that uses others to generate the Bootstrap Breadcrumbs.

Usage

The last item in the array of items will be automatically marked as "active" and disabled

<Breadcrumbs items={[
                {name: 'Dashboard', url: '/dashboard'},
                {name: 'Shows', url: '/shows'},
                {name: 'Seasons', url: '/seasons?show=the_office'},
                {name: 'Episodes', url: '/seasons?show=the_office&season=1'},
                {name: 'Episode 1: Pilot', url: '/seasons?show=the_office&season=1&episode=1'},
             ]} 
             onUrlChange={(url) => navigate(url)}
             separator={'|'}/>

Types

export type BreadcrumbsProps = {
    className?: string,
    style?: React.CSSProperties,
    withBackground?: boolean,
    items: BreadcrumbItemProps[],
    onUrlChange: (url: string) => void,
    separator?: string
};
export type BreadcrumbItemProps = {
    name: string,
    url: string
}

BreadcrumbSeparator

NOTICE

This component, the breadcrumb-item-separator, is used to make up a smarter component: "Breadcrumbs", which automatically generates the values and container in one. Use the Breadcrumbs component instead of this, unless you need some custom functionality beyond the smarter component.

Usage

<BreadcrumbSeparator separator={'|'}/>

Types

export type BreadcrumbSeparatorProps = {
    className?: string,
    style?: React.CSSProperties,
    innerRef?: any,
    separator?: string
}

Button

The standard Bootstrap Button with a few additional colors: Orange, Purple, and Pink'

Usage

<Button onClick={() => showProductModalDetails()}>Show Details</Button>

Set the button to be displayed as a block

<Button block onClick={() => showProductModalDetails()}>Show Details</Button>
<Button block={true} onClick={() => showProductModalDetails()}>Show Details</Button>

Get the outlined version of the button

<Button outline type={'error'} onClick={() => deleteProduct()}>Delete</Button>
<Button outline={true} type={'error'} onClick={() => deleteProduct()}>Delete</Button>

Quickly and easily switch the displayed mode based on a status, outlining if inactive

<Button outline={selectedStatus !== 'hold'} onClick={() => setStatus('hold')}>On Hold</Button>
<Button outline={selectedStatus !== 'available'} onClick={() => setStatus('available')}>Available</Button>

Easily disable buttons in a form

<Button disabled={formIsDisabled} onClick={() => submitForm()}>Submit</Button>

If the button is inside of a Form element and the Form element has an onSubmit, you can set buttonType to "submit" and the form's onSubmit method will be called instead. This method generally lets you utilize the enter-key on inputs to submit the form as well.

<Form onSubmit={() => submitForm()}>
    ...
    <Button buttonType={'submit'}>Submit</Button>
</Form>

Types

export type ButtonProps = {
    onClick?: (ButtonProps, any) => void,
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
    id?: string,
    buttonType?: 'button' | 'submit',
    noDefaultType?: boolean,
    block?: boolean,
    outline?: boolean,
    title?: string,
    size?: 'xs' | 'sm' | 'md' | 'lg',
    type?: (
        'primary' | 'blue' |
        'secondary' |
        'success' | 'green' |
        'danger' | 'red' | 'error' |
        'warning' | 'yellow' |
        'orange' |
        'purple' |
        'pink' |
        'light' | 'default' |
        'dark' |
        'link'
        ),
    disabled?: boolean
};

ButtonGroup

The Bootstrap Button Group

Usage

<ButtonGroup>
	<Button outline={selectedStatus !== 'hold'} onClick={() => setStatus('hold')}>On Hold</Button>
	<Button outline={selectedStatus !== 'available'} onClick={() => setStatus('available')}>Available</Button>
</ButtonGroup>

Types

export type ButtonGroupProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
    block?: boolean
}

Card

The Bootstrap Card container

Usage

<Card>
	<CardHeader>
		{name}
	</CardHeader>

	<CardBody>
		{details}
	</CardBody>
    
	<CardFooter>
		<Button onClick={() => save()}>Save</Button>
	</CardFooter>
</Card>

Types

export type CardProps = {
    className?: string,
    style?: React.CSSProperties,
    isClickable?: boolean,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
    shadow?: 1 | 2 | 3 | 4 | 5,
    onClick?: () => void
}

CardBody

The Bootstrap Card body container

Usage

<Card>
	<CardHeader>
		{name}
	</CardHeader>

	<CardBody>
		{details}
	</CardBody>
    
	<CardFooter>
		<Button onClick={() => save()}>Save</Button>
	</CardFooter>
</Card>

Types

export type CardBodyProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
}

CardFooter

The Bootstrap Card footer container

Usage

<Card>
	<CardHeader>
		{name}
	</CardHeader>

	<CardBody>
		{details}
	</CardBody>
    
	<CardFooter>
		<Button onClick={() => save()}>Save</Button>
	</CardFooter>
</Card>

Types

export type CardFooterProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
}

CardHeader

The Bootstrap Card header container. This is not an h* tag, but a div wrapping the header content inside the card.

Usage

<Card>
	<CardHeader>
            <Header size={'sm'}>{name}</Header>
	</CardHeader>

	<CardBody>
		{details}
	</CardBody>
    
	<CardFooter>
		<Button onClick={() => save()}>Save</Button>
	</CardFooter>
</Card>

Types

export type CardHeaderProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any
}

CardIcon

The Bootstrap Card image with a built-in font-awesome icon

Usage

<Card>
	<CardIcon icon={'users'} background={'tomato'}/>

	<CardBody>
		{details}
	</CardBody>
    
	<CardFooter>
		<Button onClick={() => save()}>Save</Button>
	</CardFooter>
</Card>

Types

export type CardIconProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    background?: string,
    position?: 'top' | 'bottom' | 'both',
    noPosition?: boolean,
    size?: SizeProp,
    color?: string,
    src?: string,
    alt?: string,
    icon: string
}

CardImage

The Bootstrap Card image

Usage

<Card>
	<CardImage src={'/assets/images/mountains.png'} position={'top'}/>

	<CardBody>
		{details}
	</CardBody>
    
	<CardFooter>
		<Button onClick={() => save()}>Save</Button>
	</CardFooter>
</Card>

The position is important to include, 'top', 'middle', 'bottom' and will default to 'top'. Use noPosition if it's important to not include the position details.

Types

export type CardImageProps = {
    src: string,
    alt?: string,
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    noPosition?: boolean,
    background?: string,
    position?: 'top' | 'bottom' | 'both'
}

Clear

A utility component that inserts a div with a "clear" class, which has a css property "clear: both"

Usage

<Clear/>

Types

export type ClearProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
}

Code

A wrapper for displaying pre-formatted code

Usage

<Code>
    &amp;lt&semi;p&amp;gt&semi;Sample text here...&amp;lt&semi;/p&amp;gt&semi;
</Code>

Types

export type CodeProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
};

Container

The Bootstrap Container

Usage

<Container>
    ...
</Container>

<Container size={'sm'}>
    ...
</Container>

Use the flex attribute to make the container fit to the full-width

<Container flex>
    ...
</Container>

Types

export type ContainerProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    id?: string,
    size?: 'sm' | 'small' | 'lg' | 'large' | string,
    centerContent?: boolean,
    inline?: boolean,
    flex?: boolean,
    mode?: 'sidebar'
}

Form

The standard html Form wrapper

Usage

<Form>...</Form>

Types

export type FormProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
    onSubmit?: (FormProps, any) => void
}

FormGroup

An input wrapper for the label and input elements

Usage

<FormGroup>
    <Label>First Name</Label>
    <Input type={'text'} placeholder={'First Name'}/>
</FormGroup>

Types

export type FormGroupProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
    mode?: 'plain'
}

Header

A wrapper for the standard h* elements

Usage

<Header size={'xl'}>Dashboard</Header>

There are also sizes beyond the standard h1 to h6, with "xxl" and "xxxs"

Types

export type HeaderProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    size?: (
        'extra-extra-extra-small' | 'xxxs' |
        'extra-extra-small' | 'xxs' |
        'extra-small' | 'xs' |
        'small' | 'sm' |
        'medium' | 'md' | 'default' |
        'large' | 'lg' |
        'extra-large' | 'xl' |
        'xxl' | 'extra-extra-large'
        ),
    id?: string,
    innerRef?: any,
    textCenter?: boolean,
    noTopPadding?: boolean,
    bold?: boolean,
    italic?: boolean
}

Icon

DESCRIPTION

Usage

[DETAILS]

Types

export type IconProps = FontAwesomeIconProps & {
    icon: string,
    size?: SizeProp,
    className?: string,
    style?: React.CSSProperties,
    noPosition?: boolean,
}

IconLinkCard

DESCRIPTION

Usage

[DETAILS]

Types

export type IconLinkCardProps = {
    onClick: () => void,
    icon: IconProps['icon'],
    backgroundColor: string,
    text: string,
    className?: string,
    iconColor?: IconProps['color'],
    iconStyle?: IconProps['style'],
    iconSize?: IconProps['size'],
    style?: React.CSSProperties,
    iconContainerStyle?: React.CSSProperties,
    textContainerStyle?: React.CSSProperties,
    textStyle?: React.CSSProperties,
};

IconLinkCardList

DESCRIPTION

Usage

[DETAILS]

Types

export type IconLinkCardListProps = {
    options: IconLinkCardProps[],
    align?: 'left' | 'center' | 'right'
};

Image

A standard wrapper for the html img tag

Usage

<Image src={'/assets/images/mountains.png'}/>

Types

export type ImageProps = {
    src: string,
    alt?: string,
    className?: string,
    style?: React.CSSProperties,
    id?: string,
    title?: string,
    innerRef?: any,
    onClick?: () => void,
    clickHover?: boolean
};

Input

DESCRIPTION

Usage

[DETAILS]

Types

export type InputProps = {
    onChange: (value: string) => void,
    type: string,
    value: string | number | Date | boolean,
    options?: InputSelectOption[] | InputRadioOption[],
    onEnter?: (value: string) => void,
    onCommandEnter?: (value: string) => void,
    autocomplete?: string,
    required?: boolean,
    disabled?: boolean,
    focus?: boolean,
    name?: string,
    style?: React.CSSProperties,
    inputStyle?: React.CSSProperties,
    labelStyle?: React.CSSProperties,
    className?: string,
    mode?: 'plain',
    ref: any,
    placeholder?: string,
    helpMessage?: string,
    errorMessage?: string,
    textCenter?: boolean,
    rows?: number,
    showMessageLength?: boolean,
    maxMessageLength?: number,
    autoresize?: boolean,
    maxRows?: number,
    minRows?: number,
    onHeightChange?: (height) => void,
    cacheMeasurements?: boolean,
    label?: string,
    labelSize?: string,
}

InputCheckbox

The HTML radio inputs grouped to one

Usage

<InputCheckbox value={termsAreAgreed}
               onChange={(newValue) => setTermsAreAgreed(newValue)}>

Types

export type InputCheckboxProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode,
    //When the input changes, this function will be called
    onChange: (string, InputCheckboxProps, {value, event, props}) => void,
    //The value of the input
    value?: boolean,
    //disables the input and prevents the user from entering any information
    disabled?: boolean,
    //Adds some error stylings to the input
    hasError?: boolean,
    focus?: boolean,
    innerRef?: any
};

InputDate

A freeform text-input date picker, which lets the user type a date and provides them with feedback about the interpreted date from their input

Usage

<InputDate value={startDate}
           onChange={(newStartDate) => setStartDate(newStartDate)}
           placeholder={'Start Date'}>

Types

export type InputDateProps = {
    className?: string,
    style?: React.CSSProperties,
    // innerRef?: React.LegacyRef<HTMLInputElement>,
    innerRef?: any,
    //When the input changes, this function will be called
    onChange?: (value) => void,
    //The value of the input
    value?: Date,
    autocomplete?: string,
    //If true, this will set the focus automatically when the input is loaded
    focus?: boolean,
    //The placeholder for the element
    placeholder?: string,
    //disables the input and prevents the user from entering any information
    disabled?: boolean,
    //Adds some error stylings to the input
    hasError?: boolean,
    //center the text inside the input
    textCenter?: boolean
};

InputGroup

DESCRIPTION

Usage

[DETAILS]

Types

export type InputGroupProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
}

InputGroupItem

DESCRIPTION

Usage

[DETAILS]

Types

export type InputGroupItemProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
    type?: 'prepend' | 'append'
}

InputGroupText

DESCRIPTION

Usage

[DETAILS]

Types

export type InputGroupTextProps = {
    className: string,
    style?: React.CSSProperties,
    innerRef?: any,
    children: React.ReactNode
};

InputNumber

The HTML input element, with a number type

Usage

<InputNumber value={quantity}
             onChange={(newValue) => setQuantity(newValue)}
             placeholder={'Quantity'}>

Types

export type InputNumberProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode,
    focus?: boolean,
    mode?: string,
    //When the input changes, this function will be called
    onChange?: (string, InputNumberProps, {value, event, props}) => void,
    //The value of the input
    value?: string | number,
    autocomplete?: string,
    //The placeholder for the element
    placeholder?: string,
    //disables the input and prevents the user from entering any information
    disabled?: boolean,
    //Adds some error stylings to the input
    hasError?: boolean,
    //center the text inside the input
    textCenter?: boolean,
    innerRef?: any
};

InputRadio

The HTML radio inputs grouped to one

Usage

<InputRadio  value={selectedFruit}
             onChange={(newValue) => setSelectedFruit(newValue)}
             options={[
                {
                    text: 'Orange',
                    value: 'orange'
                },
                {
                    text: 'Apple',
                    value: 'apple'
                },
                {
                    text: 'Banana',
                    value: 'banana'
                }
             ]}>

Types

export type InputRadioOption = {
    value: string,
    text: string,
    className?: string
}
export type InputRadioProps = {
    children?: React.ReactNode,
    style?: React.CSSProperties,
    className?: string | Array<string>,
    name: string,
    options: InputRadioOption[],
    onChange: (string, OptionType) => void,
    focus?: boolean,
    hasError?: boolean,
    disabled?: boolean,
    title?: string,
    value?: string | number | boolean,
    id?: string,
    ref?: any,
    innerRef?: any
}

InputSelect

The HTML select element

Usage

<InputSelect value={selectedFruit}
             onChange={(newValue) => setSelectedFruit(newValue)}
             options={[
                {
                    text: 'Orange',
                    value: 'orange'
                },
                {
                    text: 'Apple',
                    value: 'apple'
                },
                {
                    text: 'Banana',
                    value: 'banana'
                }
             ]}>

Types

export type InputSelectOption = {
    value: string,
    text: string
}
export type InputSelectProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode,
    //When the input changes, this function will be called
    onChange?: (string, InputSelectProps, {value, event, props}) => void,
    //The list of possible radio options that the user can select from
    options?: InputSelectOption[],
    //The value of the input
    value: string | boolean | number | Record<any, unknown> | any[],
    //If true, this will set the focus automatically when the input is loaded
    focus?: boolean,
    //disables the input and prevents the user from entering any information
    disabled?: boolean,
    //Adds some error stylings to the input
    hasError?: boolean,
    innerRef?: any,
    mode?: string
};

InputText

The HTML input element, with flexible type value for simple text inputs

Usage

<InputText value={firstName}
           onChange={(newValue) => setFirstName(newValue)}
           placeholder={'First Name'}>

Types

export type InputTextProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode,
    innerRef?: any,
    autocomplete?: string,
    //When the input changes, this function will be called
    onChange?: (string, InputTextProps, {value, event, props}) => void,
    onEnter?: (Record) => void,
    //The value of the input
    value?: string,
    size?: string,
    //If true, this will set the focus automatically when the input is loaded
    focus?: boolean,
    //The type of the input
    type?: string,
    //The placeholder for the element
    placeholder?: string,
    //disables the input and prevents the user from entering any information
    disabled?: boolean,
    //Adds some error stylings to the input
    hasError?: boolean,
    //center the text inside the input
    textCenter?: boolean,
    mode?: string
};

InputTextArea

DESCRIPTION

Usage

[DETAILS]

Types

export type TextAreaProps = {
    className?: string | Array<string>,
    style?: React.CSSProperties,
    children?: React.ReactNode,
    focus?: boolean,
    onChange?: (string, TextAreaProps, {value, event, props}) => void,
    onCommandEnter?: (Record) => void,
    onEnter?: (Record) => void,
    ref?: Ref<any>,
    hasError?: boolean,
    disabled?: boolean,
    autocomplete?: string,
    autosize?: boolean,
    placeholder?: string,
    value?: string,
    rows?: number,
    textCenter?: boolean,
    mode?: 'plain' | string,
    maxRows?: number,
    minRows?: number,
    onHeightChange?: (height) => void,
    cacheMeasurements?: boolean,
}

InputTextAreaAutoresize

DESCRIPTION

Usage

[DETAILS]

Types

export type TextAreaAutoresizeProps = {
    className?: string | Array<string>,
    style?: React.CSSProperties,
    children?: React.ReactNode,
    focus?: boolean,
    onChange?: (string, TextAreaProps, {value, event, props}) => void,
    onEnter?: (Record) => void,
    onCommandEnter?: (Record) => void,
    hasError?: boolean,
    disabled?: boolean,
    autocomplete?: string,
    autosize?: boolean,
    placeholder?: string,
    value?: string,
    rows?: number,
    textCenter?: boolean,
    mode?: 'plain' | string,
    maxRows?: number,
    minRows?: number,
    onHeightChange?: (height) => void,
    cacheMeasurements?: boolean,
}

Label

A simple wrapper for the html label tag

Usage

<Label>First Name</Label>

Types

export type LabelProps = {
    className?: string,
    style?: React.CSSProperties,
    onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void,
    size?: string,
    title?: string,
    innerRef?: any,
    children?: React.ReactNode
};

LabelValue

A labeled text value display for displaying a value and the label

Usage

<LabelValue label={'Word Count'}
            value={wordCount}/>

A valueLoading attribute can be used if you need to get data dynamically, and want to display a placeholder until the data is received

<LabelValue label={'Articles Found'}
            value={articleCount}
            size={'sm'}
            valueLoading={pageIsLoading}/>

Types

export type LabelValueProps = {
    label: string | number | React.ReactNode,
    value: string | number | React.ReactNode,
    style?: React.CSSProperties,
    size?: 'sm',
    className?: string,
    labelStyle?: React.CSSProperties,
    labelLink?: () => void,
    labelClick?: () => void,
    labelLoading?: boolean,
    valueStyle?: React.CSSProperties,
    valueLink?: () => void,
    valueClick?: () => void,
    valueLoading?: boolean,
};

LineBreak

A simple hr and br html tag wrapper

Usage

<LineBreak/> //<hr>

<LineBreak clear/> //<br>
<LineBreak br/> //<br>
<LineBreak blank/> //<br>

Types

export type LineBreakProps = {
    className?: string | Array<string>,
    style?: React.CSSProperties,
    children?: React.ReactNode,
    noMargins?: boolean,
    noMargin?: boolean,
    clear?: boolean,
    innerRef?: any,
    blank?: boolean,
    br?: boolean
}

Link

An a wrapper, utilizing an onclick instead of an href value

Usage

<Link onClick={() => Router.push('/dashboard')}>
    Dashboard
</Link>

Types

export type LinkProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    href?: () => void,
    onClick?: () => void,
    innerRef?: any,
    notHref?: boolean,
    disabled?: boolean,
    textCenter?: boolean,
    title?: string
}

ListGroup

A Wrapper of the Bootstrap component List Group

Usage

<ListGroup>
    <ListGroupItem>Blackberries</ListGroupItem>
    <ListGroupItem>Blueberries</ListGroupItem>
    <ListGroupItem>Raspberries</ListGroupItem>
</ListGroup>

Types

export type ListGroupProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
};

ListGroupItem

A Wrapper of the Bootstrap component List Group

Usage

<ListGroup>
    <ListGroupItem>Blackberries</ListGroupItem>
    <ListGroupItem>Blueberries</ListGroupItem>
    <ListGroupItem>Raspberries</ListGroupItem>
</ListGroup>

Types

export type ListGroupItemProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    onClick?: () => void,
    badge?: string,
    badgeType?: string,
    badgeColor?: string
}

ListItem

A simple wrapper for the HTML element li

Usage

<UnorderedList>
    <ListItem>Apples</ListItem>
    <ListItem>Bananas</ListItem>
    <ListItem>Oranges</ListItem>
</UnorderedList>

Types

export type ListItemProps = {
    className?: string,
    style?: React.CSSProperties,
    onClick?: () => void
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
};

LoadingSpinner

A simple loading spinner image

Usage

<LoadingSpinner speed={'slow'}/>

Types

export type LoadingSpinnerProps = {
    className?: string,
    style?: React.CSSProperties,
    size?: number,
    speed?: 'slow' | 'default' | 'fast'
};

Main

A simple wrapper for the HTML element main

Usage

<Main>...</Main>

Types

export type MainProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
}

MediaBody

DESCRIPTION

Usage

[DETAILS]

Types

export type MediaBodyProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
}

MediaContainer

DESCRIPTION

Usage

[DETAILS]

Types

export type MediaContainerProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
    border?: boolean,
    withBorder?: boolean,
    borderBottom?: boolean,
    bordered?: boolean,
}

MediaImage

DESCRIPTION

Usage

[DETAILS]

Types

export type MediaImageProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode,
    src: string,
    //The vertical position of the image, relative to the rest of the media body
    position?: string,
    //Whether the image appears before or after the media body
    order?: string
};

MediaItem

DESCRIPTION

Usage

[DETAILS]

Types

export type MediaItemProps = {
    className?: string,
    style?: React.CSSProperties,
    border?: boolean,
    borderBottom?: boolean,
    src: string,
    position?: string,
    children: React.ReactNode,
};

Modal

DESCRIPTION

Usage

[DETAILS]

Types

export type ModalProps = {
    className?: string,
    style?: React.CSSProperties,
    show: boolean,
    size?: (
        'sm' | 'small' |
        'lg' | 'large' |
        'xl' | 'extra-large'
        ),
    centered?: boolean,
    disableEscapeClose?: boolean,
    disableBackgroundClose?: boolean,
    closeModal?: () => void,
    onBackgroundClick?: () => void,
    onEscapeClick?: () => void,
    onShow?: () => void,
    onHide?: () => void,
};

ModalBody

DESCRIPTION

Usage

[DETAILS]

Types

export type ModalBodyProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
}

ModalContent

DESCRIPTION

Usage

[DETAILS]

Types

export type ModalContentProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
};

ModalFooter

DESCRIPTION

Usage

[DETAILS]

Types

export type ModalFooterProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
};

ModalHeader

DESCRIPTION

Usage

[DETAILS]

Types

export type ModalHeaderProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
    onClose?: () => void,
    noBorder?: boolean,
    closeOnly?: boolean,
};

OrderedList

A simple wrapper for the ol html element

Usage

<OrderedList>
	<ListItem>Spring</ListItem>
	<ListItem>Summer</ListItem>
	<ListItem>Fall</ListItem>
	<ListItem>Winter</ListItem>
</OrderedList>

Types

export type OrderedListProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
}

Paragraph

A simple wrapper of the HTML element p

Usage

<Paragraph>
    Welcome, {user.firstName}!
</Paragraph>

<Paragraph textCenter>
    Welcome, {user.firstName}!
</Paragraph>

Types

export type ParagraphProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode,
    innerRef?: any,
    title?: string,
    textCenter?: boolean,
    textLeft?: boolean,
    textRight?: boolean,
    bold?: boolean,
    italic?: boolean,
    underline?: boolean,
    //A simple additional styling option to quickly format the text as a certain type
    type?: string,
    onClick?: (props, event) => void
};

Placeholder

DESCRIPTION

Usage

[DETAILS]

Types

export type PlaceholderProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode,
    title?: boolean,
    block?: boolean,
    inline?: boolean,
}

ProgressBar

The progress-bar progress indicator

Usage

The progress attribute "value" is a value from 0 to 100

<ProgressBar value={60}/>

Types

export type ProgressBarProps = {
    height: number,
    value: number,
    color?: string,
    type?: string,
    animated?: boolean,
    striped?: boolean,
    showLabel?: boolean,
    className?: string,
    style?: React.CSSProperties,
}

ProgressBarContainer

The progress-bar container.

This component is used as a piece of the "ProgressBar" smart component. Use that instead, unless you need customized functionality.

Usage

<ProgressBarContainer>
    <ProgressBarProgress value={45}/>
</ProgressBarContainer>

Types

export type ProgressBarContainerProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
    height?: number,
}

ProgressBarProgress

The progress-bar progress indicator.

This component is used as a piece of the "ProgressBar" smart component. Use that instead, unless you need customized functionality.

Usage

The progress attribute "value" is a value from 0 to 100

<ProgressBarContainer>
    <ProgressBarProgress value={45}/>
</ProgressBarContainer>

Types

export type ProgressBarProgressProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode,
    color?: string,
    //Make the progress bar striped
    striped?: boolean,
    //If the progress bar is striped, this will animate it
    animated?: boolean,
    type?: string,
    innerRef?: any,
    value?: number,
    showLabel?: boolean
};

Recommended

A utility html <sup> element to add a blue "recommended" star (as opposed to red for "required")

Usage

<Recommended/>

<Header>
    Sign Up <Recommended/>
</Header>

Types

export type RecommendedProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
}

Required

A utility html <sup> element to add a red "required" star

Usage

<Required/>

<Header>
    Sign Up <Required/>
</Header>

Types

export type RequiredProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
}

Row

The Bootstrap Row in the grid system

Usage

<Row>...</Row>

Types

export type RowProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
}

Show

A utility component to easily hide or show content based on a boolean attribute.

Usage

<Show show={user.permissions.includes('round_details')}>
	<Header size={'sm'}>Round Details</Header>
	...
</Show>

This component is kind of experimental. You'll run into issues like this throwing an error:

//We're checking for user object existence here, but if it's null..
<Show show={!!user}>
	//An error would be thrown here whenever user is null, because this is still technically rendered
	<Header>Hello, {user.name}</Header>
</Show>

I think the alternative to this would be to

{user && getUserDetails()}

Types

export type ShowProps = {
    show: boolean,
    children?: React.ReactNode | React.ReactNodeArray,
}

SidebarMainContainer

A sidebar container sister-component, which is set to the right to display the main content in a sidebar mode

Usage

The Container wrapper with mode='sidebar' is necessary to make the sidebar container work

<Container mode={'sidebar'}>
    <SidebarSideContainer>
        ...
    </SidebarSideContainer>
    
    <SidebarMainContainer>
        ...
    </SidebarMainContainer>
</Container>

Types

export type SidebarMainContainerProps = ContainerProps & {
    className?: string
    children: React.ReactNode,
    style?: React.CSSProperties,
};

SidebarSideContainer

A sidebar container sister-component, which is set to the right to display the main content in a sidebar mode

Usage

The Container wrapper with mode='sidebar' is necessary to make the sidebar container work

<Container mode={'sidebar'}>
    <SidebarSideContainer>
        ...
    </SidebarSideContainer>
    
    <SidebarMainContainer>
        ...
    </SidebarMainContainer>
</Container>

Types

export type SidebarSideContainerProps = ContainerProps &  {
    className?: string,
    children?: React.ReactNode,
    fixed?: boolean,
    card?: boolean,
    style?: React.CSSProperties,
};

Small

small html wrapper

Usage

<Header>
	{product.name}, <Small>{product.size}</Small>
</Header>

Types

export type SmallProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    title?: string,
    innerRef?: any,
}

SmartCard

DESCRIPTION

Usage

[DETAILS]

Types

export type SmartCardProps = {
    href?: () => void,
    onClick?: () => void,
    className?: string,
    style?: React.CSSProperties,
    headerStyle?: React.CSSProperties,
    footerStyle?: React.CSSProperties,
    bodyStyle?: React.CSSProperties,
    iconStyle?: React.CSSProperties,
    shadow?: CardProps['shadow'],
    position?: 'top' | 'bottom' | 'both',
    header?: string | React.ReactNode,
    footer?: string | React.ReactNode,
    children?: string | React.ReactNode,
    src?: string,
    iconSrc?: string,
    icon?: string,
    iconColor?: string,
    iconSize?: SizeProp,
    iconBackground?: string,
}

Table

table html element wrapper

Usage

<Table>
	<TableHead>
		<TableRow>
			<TableHeader>User ID</TableHeader>
			<TableHeader>Name</TableHeader>
			<TableHeader>Age</TableHeader>
		</TableRow>
	</TableHead>

	<TableBody>
		<TableRow>
			<TableHeader>{user.user_id}</TableHeader>
			<TableHeader>{user.name}</TableHeader>
			<TableHeader>{user.age}</TableHeader>
		</TableRow>
	</TableBody>
</Table>

<Table striped
	   hover
	   bordered
	   small>...</Table>

Types

export type TableProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
    striped?: boolean,
    hover?: boolean,
    bordered?: boolean,
    small?: boolean,
    responsive?: boolean,
    'responsive-sm'?: boolean,
    'responsive-md'?: boolean,
    'responsive-lg'?: boolean,
    'responsive-xl'?: boolean,
};

TableBody

tbody html element wrapper

Usage

<Table>
	<TableHead>
		<TableRow>
			<TableHeader>User ID</TableHeader>
			<TableHeader>Name</TableHeader>
			<TableHeader>Age</TableHeader>
		</TableRow>
	</TableHead>
    
	<TableBody>
		<TableRow>
			<TableHeader>{user.user_id}</TableHeader>
			<TableHeader>{user.name}</TableHeader>
			<TableHeader>{user.age}</TableHeader>
		</TableRow>
	</TableBody>
</Table>

Types

export type TableBodyProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
}

TableData

td html element wrapper

Usage

<Table>
	<TableHead>
		<TableRow>
			<TableHeader>User ID</TableHeader>
			<TableHeader>Name</TableHeader>
			<TableHeader>Age</TableHeader>
		</TableRow>
	</TableHead>
    
	<TableBody>
		<TableRow>
			<TableHeader>{user.user_id}</TableHeader>
			<TableHeader>{user.name}</TableHeader>
			<TableHeader>{user.age}</TableHeader>
		</TableRow>
	</TableBody>
</Table>

Types

export type TableDataProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
    colSpan?: number,
    colspan?: number,
    align?: 'left' | 'center' | 'right'
};

TableHead

thead html element wrapper

Usage

<Table>
	<TableHead>
		<TableRow>
			<TableHeader>User ID</TableHeader>
			<TableHeader>Name</TableHeader>
			<TableHeader>Age</TableHeader>
		</TableRow>
	</TableHead>
    
	<TableBody>
		<TableRow>
			<TableHeader>{user.user_id}</TableHeader>
			<TableHeader>{user.name}</TableHeader>
			<TableHeader>{user.age}</TableHeader>
		</TableRow>
	</TableBody>
</Table>

Types

export type TableHeadProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
}

TableHeader

th html element wrapper

Usage

<Table>
	<TableHead>
		<TableRow>
			<TableHeader>User ID</TableHeader>
			<TableHeader>Name</TableHeader>
			<TableHeader>Age</TableHeader>
		</TableRow>
	</TableHead>

	<TableBody>
		<TableRow>
			<TableHeader>{user.user_id}</TableHeader>
			<TableHeader>{user.name}</TableHeader>
			<TableHeader>{user.age}</TableHeader>
		</TableRow>
	</TableBody>
</Table>

Types

export type TableHeaderProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
    align?: 'left' | 'center' | 'right'
};

TableRow

tr html element wrapper

Usage

<Table>
	<TableHead>
		<TableRow>
			<TableHeader>User ID</TableHeader>
			<TableHeader>Name</TableHeader>
			<TableHeader>Age</TableHeader>
		</TableRow>
	</TableHead>
    
	<TableBody>
		<TableRow>
			<TableHeader>{user.user_id}</TableHeader>
			<TableHeader>{user.name}</TableHeader>
			<TableHeader>{user.age}</TableHeader>
		</TableRow>
	</TableBody>
</Table>

Types

export type TableRowProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    onClick?: () => void,
    align?: 'middle',
    innerRef?: any,
};

TabNav

A tab navigation menu to display different views

Usage

<TabNav views={[
	{
                id: 'summary',
                name: 'Summary',
                children: (...),
                onOpen: (previousView) => {...}
        },
        {
                id: 'friends',
                name: 'Friends',
                children: (...)
        }
    ]} 
        activeViewID={selectedView}>

Types

export type TabNavProps = {
    views: ViewList,
    activeViewID?: string,
    reset?: any
};
export type View = {
    id: string,
    name: React.ReactNode | string,
    children: React.ReactNode,
    onOpen?: (previousView: string) => void,
    onClose?: () => void
}
export type ViewList = View[];

Text

A simple wrapper of the span html tag, with a few additional feature attributes

Usage

<Text>Hello, {name}</Text>

<Text bold>Hello, {name}</Text>

<Text italic>Hello, {name}</Text>

Types

export type TextProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode,
    //text align to the center
    textCenter?: boolean,
    //text align to the left
    textLeft?: boolean,
    innerRef?: any,
    title?: string,
    bold?: boolean,
    italic?: boolean,
    disabled?: boolean,
    //text align to the right
    textRight?: boolean,
    //A simple additional styling option to quickly format the text as a certain type
    type?: string,
    onClick?: (props, event) => void
}

UnorderedList

A simple wrapper for the ul html element

Usage

<UnorderedList>
	<ListItem>Cats</ListItem>
	<ListItem>Dogs</ListItem>
	<ListItem>Birds</ListItem>
</UnorderedList>

Types

export type UnorderedListProps = {
    className?: string,
    style?: React.CSSProperties,
    children?: React.ReactNode | React.ReactNodeArray,
    innerRef?: any,
    type?: 'help',
}