@noahvarghese/react-components v0.1.91

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

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

Sample Usage

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

Checkbox

Description

Styled HTML Checkbox

Props

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

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

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

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

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

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

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

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

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

Sample Usage

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

Radio

Description

Single Radio Button custom styles applied.

Props

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

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

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