Sing App React v5.0.0

  1. Charts
  2. Forms
  3. UI
  4. Grid
  5. Maps
  6. Tables

Charts

Flot Charts

Built with Flot JS. Required libs:

import 'imports-loader?jQuery=jquery,this=>window!flot';

Interactive Sparklines

Built with jqeruy.sparkline.

import 'imports-loader?jQuery=jquery,this=>window!jquery-sparkline';

Rickshaw

Realtime chart is based on Rickshaw realtime example.

import Rickshaw from 'rickshaw';

Sparkline Pie Charts

Same as interactive sparklines based on jqeruy.sparkline.

D3 charts

These charts are based on amazing D3.js library. Here is what D3 says about itself:

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

So it means that graphs are drawn with standard SVG and styled with CSS. You can customize all you like with techniques you already know.

There are two libraries used in Sing App which work on top of D3.js:

import d3 from 'd3';
import nv from 'nvd3';

Morris Charts

Built with Morris JS.

import 'imports-loader?jQuery=jquery,this=>window!webpack-raphael/raphael';
import 'imports-loader?jQuery=jquery,this=>window!govpredict-morris/morris';

Easy Pie Charts

Built with Easy Pie Chart.

import 'imports-loader?jQuery=jquery,this=>window!easy-pie-chart/dist/jquery.easypiechart.js';

Flot Bars

Same as Flot Charts built with Flot. A bit different dependencies:

import 'imports-loader?jQuery=jquery,this=>window!jquery.flot.animator/jquery.flot.animator';
import 'imports-loader?jQuery=jquery,this=>window!flot';
import 'imports-loader?jQuery=jquery,this=>window!flot/jquery.flot.time';

Form Elements

import { Form } from 'reactstrap';

Inputs

Bootstrap styles input by default, so there is no need to add any classes to inputs. Just use them. Don't forget to include input type.

Bootstrap has a great documentation about forms.

Input Sizing

Any input can be sized by wrapping in <Col sm="*" xs="*"> component. For vertical sizing size="lg" and size="sm" props are available.

Textareas

Auto-growing textarea uses Textarea Autosize to increase area size dynamically. Imports:

mport TextareaAutosize from 'react-autosize-textarea';

Wysiwyg editor is based on React Draft Wysiwyg. Imports:

import { Editor } from 'react-draft-wysiwyg';
import { EditorState } from 'draft-js';

Markdown editor is built with React Markdown Editor. Imports:

import ReactMde, { ReactMdeCommands } from 'react-mde';

Selects

Two different type of selects avaiables in Sing template:

Imports:

import { UncontrolledButtonDropdown,
          DropdownMenu,
          DropdownItem,
          DropdownToggle,
        } from 'reactstrap';
import Select2 from 'react-select2-wrapper';

Bootstrap Select code example:

<UncontrolledButtonDropdown>
    <DropdownToggle
        caret color="secondary"
        className="dropdown-toggle-split mr-xs"
    >
        {this.state.selected}
    </DropdownToggle>
    <DropdownMenu>
        <DropdownItem onClick={this.changeSelect}>
           Option One
        </DropdownItem>
        <DropdownItem onClick={this.changeSelect}>
            Option Two
        </DropdownItem>
        <DropdownItem onClick={this.changeSelect}>
            Option Three
        </DropdownItem>
    </DropdownMenu>
</UncontrolledButtonDropdown>

Checkboxes and Radio

To style default checkboxes and radio buttons Awesome Bootstrap Checkbox library is used. This lib was written specially for Sing, so in case you find some bugs or want some features - let us know.

Button-like checkboxes

Bootstrap has a great api to handle button states - bootstrap button, so using it to imitate checkbox or radio buttons.

iOS-like switches

Usage:

<FormGroup className="display-inline-block checkbox-ios ml">
    <Label for="checkbox-ios" className="switch">
        <Input type="checkbox" className="ios" id="checkbox-ios" /><i />
    </Label>
</FormGroup></code></pre>

Pickers

Any field may have either react-datetime or rc-color-picker attached. Imports:

import Datetime from 'react-datetime';
import ColorPicker from 'rc-color-picker';

Masked Inputs

To make any input accept only formatted values there is a great plugin to use - MaskedInput. Imports:

import MaskedInput from 'react-maskedinput';

Sliders

Sing sliders are styled version of React Bootstrap Slider.

import ReactBootstrapSlider from 'react-bootstrap-slider';

Dropzone

Dead simple file upload plugin with image preview Dropzone.

import Dropzone from 'react-dropzone';

Validation

Sing App have a good validation component <InputValidation>. Use it! 

import InputValidation from 'src/components/InputValidation/InputValidation';
import InputValidation from 'src/components/InputValidation/InputValidation';
<InputValidation
    type="text"
    id="email"
    name="email"
    trigger="change"
    required
    validations={{ isEmail: true }
    validationError={{ isEmail: 'This value should be a valid email.' }}
/>

Components

This page contain Sing-y styled versions of Bootstrap (Reactstrap): Alerts, Labels, Tooltips, Popovers, Modals and Progress Bars. All styles are in bootstrap-override.scss.

For progress bars there is a small Sing extension which allows you to change progress bars sizes by adding className: className="progress-xs", className="progress-sm".

Notifications

Sing App uses HubSpot's Messenger library. It's a client-side growl-like notifications with actions and auto-retry.

Read more at Messenger website.

Font Awesome Icons

Font Awesome is iconic font originally designed for Bootstrap (Font Awesome works great with all frameworks). It contains 439 icons in pictographic font form.

Read more at Font Awesome website.

Glyphicons Icons

200 icons in pictographic font form provided by Glyphicons.

Buttons

To create button you can style any html element with .btn class or use <Button> component. Sing App replaces default bootstrap colors with theme specific and adds two more: color="gray" and color="inverse".

You can read more at Reactstrap Buttons page.

Tabs

Tabs component may be placed both inside of .widget element or directly into main .content.

Usage example:

<Nav tabs>
    <NavItem>
        <NavLink
            className={classnames({ active: this.state.activeTab === 1 })}
            onClick={() => { this.toggleTabs(1); }}
        >
            First title
        </NavLink>
    </NavItem>
    <NavItem>
        <NavLink
            className={classnames({ active: this.state.activeTab === 2 })}
            onClick={() => { this.toggleTabs(2); }}
        >
          Second Title
        </NavLink>
    </NavItem>
</Nav>

<TabContent activeTab={this.state.activeTab}>
    <TabPane tabId={1}>
        <p>First tab content</p>
    </TabPane>
    <TabPane tabId={2}>
        <p>Second tab content</p>
    </TabPane>
</TabContent>

For more info check Reactstrap Tabs.

Accordion

Same as Tabs Accordion may be placed both as a widget inside .content or inside of .widget. Sing's accordion is a styled version of Bootstrap Collapse component.

Grouped Lists

Sing App grouped lists is a styled version of jQuery UI React Sortable HOC.

List Groups

This nestable draggable lists are built with SortableTree .

Grid System

Sing App inherits 12-column grid system from Bootstrap's great one with Reactstrap.

Widget Controls

For one of our previous works we have developed a custom component called Widget based on Widgster which provides an easy way to handle basic widget functions like collapsing, closing, refreshing & fullsreening.

import Widget from "src/components/widget/widget";

Usege example:

<Widget
  title={<h6> Alert <span className="fw-semi-bold">Messages</span></h6>}
  close settings refresh
  options={}
>
    content goes here
</Widget>

Options

Actions

Google maps

To embed Google Maps into Sing App great package is used - React Google Maps. Imports:

import { withGoogleMap,
         withScriptjs,
         GoogleMap,
         Marker,
       } from 'react-google-maps';

Vector maps

Sometimes you need to use just simplified version of map. Jvectormap does a great job in such cases.

import 'imports-loader?jQuery=jquery,this=>window!jvectormap/jquery-jvectormap.min.js';

Static Tables

Sing App tables are based on Bootstrap tables with additional styling.

Tables aviable in different sizes: size="sm" and size="lg".

Also, don't forget about responsive prop which adds horizontal scrollbar to tables for small screens.

Usage example:

<Table dark>
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</Table>

Dynamic Tables

Dynamic tables built with fully custamizable react-bootstrap-table and lightweight, fast and powerfull react-table.