osu-application v0.3.97

OSU-Application

This is a stylized component library used for building React applications for OSU ECampus. This library is included by default in the 'react-redux-boilerplate' project.

Installation

Installation is crazy easy! Just run the following in your project:

yarn add osu-application

Usage

Let's make your app pretty! Below is the JSX to use inside your React App, just import whatever component you'd like to use.

import {Header, Footer, Welcome, Instructions, GA, FormButton, FormDropdown, FormTextArea, FormInput, Toolbar} from 'osu-application';

Components

Header

This is main header UI for Ecampus interactives.

Props

Example:

<Header courseCode={'BA 101'} courseTitle={'Matching Game'} />

Footer

This is main footer UI for Ecampus interactives.

Props

Example:

<Footer />

Welcome

This is main welcome screen used when students first access an Ecampus interactive. It displays the learning objective and an overview of the interactive.

Props

Example:

<Welcome courseCode={'BA 101'} courseTitle={'Matching Game'} intro={'This is an activity where you match photos'} learningObjective={'For students to learn more about different objects'} />

Toolbar

This is a navigation bar component that can include basic navigation items and call-to-action buttons.

Props

Children Elements

Children elements must be wrapped in special tags to signify what they are.

NavItem

tags are navigation links shown on the left-hand side of the bar.

Props

ActionItem

tags are call to action buttons shown on the right-hand side of the bar.

Props

Example:

<Toolbar>
    <navItem keys={1} action={() => this.function()} active={true}>
        Home
    </navItem>
    <actionItem keys={1} action={() => this.function()}>
        New Item
    </actionItem>
</Toolbar>

Instructions

These are inline instructions used in interactives.

Props

Example:

<Instructions>
    Here are the instructions.
</Instructions>

FormInput

This a stylized form input.

Props

Example:

validate = (name, validity) => {
    this.setState({
        valid: {
            ...this.state.valid,
            [name]: validity
        }
    });
}
...
<FormInput
    initialValue={''}
    inputValue={(e) => this.function(e)}
    inputName={'customInput'}
    label={'Custom Input'}
    isValid={(value) => this.validate('customInput', value)}
    pattern='(someregexpattern)'/>

Use the contents of this.state.valid to determine if the whole form is valid.

FormDropdown

This a stylized form dropdown.

Props

Example:

<FormDropdown initialValue={''} inputValue={(e) => this.function(e)} inputName={'customDropdown'} label={'Custom Dropdown'}>
    <option value=""></option>
    <option value="a">a</option>
    <option value="b">b</option>
</FormDropdown>

FormTextArea

This a stylized form text area.

Props

Example:

<FormTextArea initialValue={''} inputValue={(e) => this.function(e)} inputName={'customTextArea'} label={'Custom TextArea'} />

FormButton

This a stylized form button.

Props

Example:

<FormButton action={(e) => this.function(e)} label={'Button Text'} />

GA

This component will include OSU Ecampus' Google Analytics in your project. No props necessary.

Example:

<GA />

Sidebar

This a customizable sidebar.

Props

Example:

<Sidebar theme={'dark'} sidebarPosition={'left'} overlay={true} sidebarVisible={() => this.unrenderSidebar()} triggerClose={this.state.boolean}>Child content</Sidebar>