My Component Library

General purpose react components for use in web based projects This does not support React Native Compiled with type definitions, can be used with TypeScript or JavaScript

Getting Started

Quick Start

npm i @noahvarghese/react-components

Components

AppRouter

Description

Wrapper for your base app. To be used in your index.[tsx,jsx] or App.[tsx,jsx].

This keeps track of your scroll location so if the user goes back a page it will remember where on the page the user was previously and scroll to that position.

For usage if using react-router and react-router-dom. Wraps provided routes in Router and Switch components.

Accepts an array of routes, NavProps and FooterProps.

For a deeper dive into props that can be passed check out ProtectedRoute, Nav, and Footer.

Props

name	type	description
navProps	NavProps	See Nav component
routes	{path: string?; component?: React.ComponenType<RouteComponentProps> \| <React.ComponentType>}[]	Same props as react-router-dom's Route component, or see ProtectedRoute
footerProps	FooterProps	See Footer Component

Sample Usage

<AppRouter
    navProps={{
        items: loggedIn
            ? [{ name: "Login", path: "/" }]
            : [
                  { name: "Home", path: "/" },
                  { name: "Logout", path: "/logout" },
              ],
        type: "card",
    }}
    routes={
        loggedIn
            ? [{ path: "/", component: Login, exact: true }]
            : [
                  {
                      path: "/",
                      component: Home,
                      protectedProps: {
                          condition: () => loggedIn,
                          redirectPath: "/404",
                      },
                  },
                  {
                      path: "/logout",
                      component: Logout,
                      protectedProps: {
                          condition: () => loggedIn,
                          redirectPath: "/404",
                      },
                  },
              ]
    }
    footerProps={{ copyright: "Noah Varghese" }}
/>

Button

Description

Styled Button. Will also render as an anchor tag if link is provided

Props

name	type	default	description
primary	[boolean]	false	determines whether to use the primary or secondary color
text	string		button text
disabled	[boolean]	undefined	sets button disabled
link	[string]	undefined	if set, renders as an anchor tag but with same stylings as button
onClick	[(e: MouseEvent<unknown, unknown>) => void;]	undefined	action to perform when clicked, can be applied to anchor tag as well
size	["small" \| "medium" \| "large"]	small	determines the size of the button
type	["button" \| "reset" \| "submit" ]	button	determines button type, does not apply to anchor

Sample Usage

<Button primary text="Submit" onClick={(_) => console.log("Clicked")} />

Checkbox

Description

Styled HTML Checkbox

Props

name	type	default	description
name	string		specifies name of input attribute, used as id as well
label	[string]	undefined	the label text, if empty uses the name
state	{state: boolean; setState: (val: boolean) => void	React.Dispatch<SetStateAction>}	provides value and way to set value
readonly	[boolean]	undefined	sets readOnly attribute of input

Sample Usage

const [state, setState] = useState(false);
return <Checkbox name="human" label="Are you human?" state={{ state, setState}}>

DropdownArrow

Description

Used to trigger showing/hiding a dropdown. Also used to visually display whether the dropdown should be showing. To be used in combination with other components.

Props

name	type	default	description
show	[boolean]	undefined	sets whether the arrow should be 'open' or not
onClick	(e: MouseEvent<unknown, unknown>) => void		function to fire when the arrow gets clicked, used to trigger display

Sample Usage

const [state, setState] = useState(false);
<DropdownArrow show={state} onClick={(_) => setState(!state) }>

FileInput

Description

Wrapper for file input. Allows drag and drop. Files should be retrieved for sending to a server by accessing the form input elements.

Props

name	type	default	description
multipleFiles	[boolean]	undefined	whether to allow multiple files to be sent
name	string		specifies name of input attribute, used as id as well
label	[string]	undefined	the label text, if empty uses the name
accept	[string]	undefined	types of files to accept, if not set allows all

Sample Usage

<FileInput multipleFiles name="Resume" label="Resume" accept="*.pdf,*.docx" />

Footer

Description

The footer for the webpage.

May display social media links, a quote or blurb, and the copyright information

Props

name	type	default	description
copyright	string		copyright information
socialMedia	[{url: string; image: string; name: string;}[]]	undefined	generates a display of images as links, name is used as the alt text, image is either the source as a string, or the path
quote	[string]	undefined	a piece of text, slogan or otherwise

Sample Usage

<Footer
    copyright="Noah Varghese 2021"
    socialMedia={[
        {
            url: "facebook.com/noah-varghese",
            image: FacebookLogo,
            name: "facebook",
        },
        {
            url: "instagram.com/noah-varghese",
            image: InstagramLogo,
            name: "instagram",
        },
    ]}
/>

Form

Description

A form wrapper to theme and simplify form options Inputs and children must be wrapped by form element

Props

name	type	description
title	string	the form name, will be displayed as a header
method	"POST" \| "PUT" \| "DELETE"	the HTTP verb to be used by the form
type	"card" \| "bordered"	applies a className to the form to change styling
url	string	the form action
submitFunction	(e: SyntheticEvent) => Promise	additional actions to be performed on submit, can cancel default form behaviour by applying e.preventDefault() within the function
buttons	React.Node[]	form action buttons

Sample Usage

<Form
    title="Sample"
    method="POST"
    type="card"
    url="/"
    submitFunction={(e) => e.preventDefault();}
    buttons={[<button type="submit">Submit</button>, <button type="reset">Reset</button>]}
>
    <input type="text" id="name" placeholder="name" value="" />
</Form>

HamburgerToggle

Description

Toggle for mobile nav

Props

name	type	default	description
showMenu	boolean		dictates whether the state is 'open'
toggleMenu	() => void		function responsible for changing whether it is 'open' or 'closed'

Sample Usage

const [open, setOpen] = useState(false);
<HamburgerToggle showMenu={open} toggleMenu={setOpen} />;

Input

Description

Wrapper for html input element Provides input validation for email, required, postal-code, phone, date. Postal code validation currently only supports Canadian postal codes, custom validator must be applied for other locales. Phone validation currently only supports Canadian postal codes, custom validator must be applied for other locales. Also can display errors.

Props

name	type	default	description
type	string		the input type (ex. date, email, tel, text, etc.)
name	string		form input name
placeholder	string		sets the label text
required	boolean		sets whether required validation is performed, and affects styling, the actual html attribute required is always set to true so the animations fire correctly
state	{state: string; setState: (val: string) => React.Dispatch<React.SetStateAction>}		allows central store of form values
validationOptions	[{runOnInput: boolean; runOnComplete: boolean; [validatorFn: (input: any, field: string) => {success: true} \| {success: false, errorMessage: string;}]}]	{runOnInput: true, runOnComplete: true}	can provide custom validator and dictate when to run the validator function, the error message gets sent to the error function provided
errorState	{error: string \| undefined;, setError: (val?: string \| undefined) => void \| React.Dispatch<SetStateAction>}		allows setting and keeping errors in central state
formatter	[(input: any) => any]	undefined	can provide custom formatter for use prior to validation and state change
autoComplete	[string]		sets autocomplete value for browser use

Sample Usage

const [emailState, setEmail] = useState("");
const [error, setError] = useState("");

return (
    <Input
        type="email"
        required={true}
        name="email"
        state={{ setState: setEmail, state: emailState }}
        errorState={{ setError: setError, error }}
        placeholder="email"
    />
);

Nav

Description

Provides mobile and desktop navigation that is done dynamically using the rendered length of the navigation lengths.

Props

name	type	default	description
items	{name: string; path: string;}[]		array of links to display in nav
type	"card"		className to be assigned, affects styling
callToAction	[{text: string; path: string;}]	undefined	if provided provides a 'call to action' in the nav to call user attention to
displayCallToAction	[() => boolean;]	undefined	provides conditions to display call to action, for example if the user is on the page the call to action would direct them to
bannerMessage	[ReactNode \| string]	undefined	provides a banner message just above the nav
displayBanner	[() => boolean;]	undefined	conditions to display banner message under
logo	string		either the imported image source as a string or the path

Sample Usage

import Logo from "../../assets/img/logo.png";

<Nav
    items={[
        { name: "Home", path: "/" },
        { name: "About", path: "/about" },
        { name: "Testimonials", path: "/testimonials" },
        { name: "Gallery", path: "/gallery" },
        { name: "Contact", path: "/contact" },
        { name: "Blog", path: "/blog" },
    ]}
    type="card"
    callToAction={{ text: "Request a quote", path: "/contact" }}
    displayCallToAction={() => {
        return true;
    }}
    bannerMessage="More than 30 years of experience"
    displayBanner={() => true}
    logo={Logo}
/>;

Notification

Description

Displays at base of containing component. Container must have set position to reltaive.

position: relative;

Props

name	type	default	description
message	string		text to display
display	boolean		determines whether to display the notification
hide	() => void		function to call when the notification is hidden, ex if you disable components on form submission then you can reenable them after the notification is finished
error	[boolean]	undefined	if true displays using error color
timeout	[number]	2000	timeout for notification to disappear in ms]

Sample Usage

const [state, setState] = useState(false);

return (
    <div
        style={{
            width: "500px",
            height: "500px",
            backgroundColor: "#f3f3f3",
            position: "relative",
        }}
    >
        <State store={store}>
            <Notification
                message="Hello"
                display={state}
                hide={() => setState(false)}
            />
        </State>
    </div>
);

ProtectedRoute

Description

Provides a wrapper around Route to check if the route may be used. If not applies a redirect. instead of component can also pass children.

Props

name	type	default	description
component	[React.ComponentType<RouteComponentProps> \| React.ComponentType]	undefined	component to display
exact	[boolean]	undefined	whether to match the path exactly
path	[string]	undefined	path to match
redirectPath	string		if condition is unmet this is the location the user will be redirected to
condition	() => boolean;		function to check if condition is valid

Sample Usage

<ProtectedRoute
    component={Dashboard}
    exact={true}
    path="/dashboard"
    redirectPath="/"
    condition={() => isLoggedIn}
    key="/dashboard"
/>

Radio

Description

Single Radio Button custom styles applied.

Props

name	type	default	description
name	string		form input name, used s label text if label is not provided
id	string		id of specific radio button
label	[string]	undefined	label text
state	{state: boolean; setState: React.Dispatch<React.SetStateAction>; }		provides way of storing and setting a central state
readonly	[boolean]	undefined	sets whether the element can be interacted with

Sample Usage

const [state, setState] = useState(false);

<Radio
    label="Test 1"
    name="Radio"
    id="Test1"
    state={{
        state,
        setState,
    }}
/>;

RadioFieldset

Description

Provides wrapper for multiple Radio inputs

Props

name	type	default	description
title	string		the label for the fieldset
radioProps	RadioProps[]		See Radio component above

Sample Usage

const [state, setState] = useState([false, false, true]);

<RadioFieldset
    title="How old are you?"
    radioProps={[
        {
            label: "Too young",
            name: "age",
            id: "tooYoung",
            state: {
                state[0],
                setState: (val: boolean) => {
                    setState([val, state[1], state[2]]);
                }
            }
        },
        {
            label: "just the right age",
            name: "age",
            id: "right age",
            state: {
                state[1],
                setState: (val: boolean) => {
                    setState([state[0], val, state[2]]);
                }
            }
        }
        {
            label: "Too old",
            name: "age",
            id: "old",
            state: {
                state[2],
                setState: (val: boolean) => {
                    setState([state[0], state[1], val]);
                }
            }
        }
    ]}
/>

Select

Description

Styled select dropdown

Props

name	type	description
name	string	name of form input
placeholder	string	used as the label
items	{id: number; value: any; }[]	items to display in dropdown
required	boolean	whether the field is required, this is superficial as the html required attribute is always set to true so the animations fire correctly
errorState	{error: string; setError: (val: string) => void \| React.Dispatch<React.SetStateAction>}	allows central error store
state	{state: {id: number; value: string;}, setState: ({id: number, value: string}) => React.Dispatch<React.SetStateAction<{id: number; value: string;}>>}	allows central store

Sample Usage

const [selected, setSelected] = useState({ id: -1, value: "" });
const [error, setError] = useState("");

return (
    <Select
        items={[
            { id: 1, value: "Kitchen" },
            { id: 2, value: "Bar" },
            { id: 3, value: "YOLO" },
        ]}
        name="department"
        placeholder="department"
        required={true}
        state={{ state: selected, setState: setSelected }}
        errorState={{ setError, error: error }}
    />
);

Theming

Theme config file is located in your project root after installation at './components.config.scss' There are a few themes provided, the default values in the file are the same as the 'default' theme.

If you wish to override the theme comment out the line '$default-theme: default;' Then any changes to the file will take effect. Any changes made will require a restart of the development server as the scss needs to be compiled.

// components.config.scss

/* If you wish to use your own values
comment out the line below */
$default-theme: owd;

$primary-color: #000000;
$secondary-color: #61dafb;
$highlight-color: #ffffff;
$accent-color: #61dafb;
$error-color: #f55549;

$bg-color: #ffffff;
$secondary-bg-color: #f3f3f3;

$root-font-size: 16px;

$header-font-family: Monsterrat;
$header-font-style: "Regular";
$header-letter-spacing: 16px;
$header-line-height: 1.2rem;

$content-font-family: Roboto;
$content-font-style: "Regular";
$content-letter-spacing: 16px;
$content-line-height: 1.2rem;
$content-font-size: 1.2rem;

$accent-font-style: italic;

Colors

Colors can be hex, rgb, rgba, or strings, same as regular css color values

Fonts

Custom fonts must be imported into your project in your index.css, then they can be referenced in '$*-font-family` variables in the components.config.scss file. The font-style is the rest of the file name if you obtained fonts from Google Fonts.

For example if you downloaded the entire Montserrat font family you would have Montserrat-Regular.ttf, Montserrat-Light.ttf etc. This expects you created @font-face rules for custom fonts using the same name as the downloaded ttf file.

Testing

Tested using react-testing-library Requires SKIP_PREFLIGHT_CHECK to be set to true to run tests

To Run Tests

git clone https://github.com/noahvarghese/react-components

cd ./react-components

echo "SKIP_PREFLIGHT_CHECK=true" > .env

yarn

# To run tests
yarn test

To View Storybook

git clone https://github.com/noahvarghese/react-components

cd ./react-components

yarn

# To launch storybook
yarn storybook

@noahvarghese/react-components

My Component Library

Getting Started

Quick Start

Components

AppRouter

Description

Props

Sample Usage

Button

Description

Props

Sample Usage

Checkbox

Description

Props

Sample Usage

DropdownArrow

Description

Props

Sample Usage

FileInput

Description

Props

Sample Usage

Footer

Description

Props

Sample Usage

Form

Description

Props

Sample Usage

HamburgerToggle

Description

Props

Sample Usage

Input

Description

Props

Sample Usage

Nav

Description

Props

Sample Usage

Notification

Description

Props

Sample Usage

ProtectedRoute

Description

Props

Sample Usage

Radio

Description

Props

Sample Usage

RadioFieldset

Description

Props

Sample Usage

Select

Description

Props

Sample Usage

Theming

Colors

Fonts

Testing

To Run Tests

To View Storybook

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Weekly Downloads