react-candy v1.0.13

React Candy

A bundle of front-end components to use with react on Web development.

React Candy's components:

• Button
• Input
• Modal & ModalButton
• PrototipedForm
• SearchField
• Selection

Note

In the belief that you want to style your own page there's no default stylesheet attributed to the components. So all the classNames are indexed on this page.

Soon a package with a default theme for these components will be given if you don't want to customize it yourself.

Button

A button that can behave like a link if it has an href param.

Props

Button can also receive HTML buttons props. (Like you probably would want to attrib an onClick event to a Button).

ClassIndex

• Button

Import

    // JS require format
    var Button = require("react-candy/Button");

    // ES6 import syntax
    import Button from 'react-candy/Button';

Usage

    <!-- A button that behaves like a button -->
    <Button onClick={(ev)=>{/*Your code goes here*/}}/>
    <!-- A button that behaves like a link -->
    <Button href="http://some.url.com" />

Input

A input with some more types available.

The Input component brings some masked inputs by default that often would need to be reimplemented to be used with react.

It also brings some brazilian-specific types like

• CPF
• CNPJ
• Telefone

with masks, as the project begun on Brazil.

Props

Types available

• telefone (For brazilian telephones (00) 99999-9999 )
• phone (US telephones (415) 555-2671)
• cpf
• cnpj
• money (It shows the currency aside the value)
• textarea
• list (A simpler approach to the HTML select)
• date (Date here is just a text with a mask)
• week (A bunch of checkboxes to select days in a week Sunday - Saturday)
• semana (Same as week but portuguese)
• HTML default types...

The readOnly prop

The Input's readOnly prop will make it render a <p> tag with the value, or a <pre> in the case of textarea, and you will probably want to attrib a style to it.

Usage

    <!-- The defaul type is text, so in this case it doesn't need to be given -->
    <Input label="Name" id="name"/>

    <!-- defaultValue is set as a number and not a text -->
    <Input type="number" label="Age" id="age" name="personAge" defaultValue={18} required/>

    <!-- The currency here will be shown as R$ -->
    <Input type="money" label="Cash Amount" id="cash" money="R$" />

There are two ways of using the Input component in forms:

Using with a <form> tag

    <form action="/submitCash" method="post">
        <Input id="cash" label="Value" type="money" money="€" />
        <Input type='submit' label="Submit Money" id="submit"/>
    </form>

Use with React Candy's <PrototipedForm>

PrototipedForm

ClassIndex

• InputPlaceholder
  • InputLabel
  • Input/${input_type}

Import

    // JS require format
    var Input = require("react-candy/Input");

    // ES6 import syntax
    import Input from 'react-candy/Input';

Modal

An out of the box Modal for React. Shows a modal with content and a close button.

Props

Usage

    <Modal id="modal">
        <h1> Any content inside modal </h1>        
    <Modal>        

ClassIndex

• Modal
  • ModalContent
    • ModalClose

Import

    // JS require format
    var Modal = require("react-candy/Modal").Modal;

    // ES6 import syntax
    import { Modal } from 'react-candy/Modal';

ModalButton

A button with the only pourpose of showing the Modal.

Props

Usage

    <ModalButton modalToShow="modal">Click to Show Modal!</ModalButton>

ClassIndex

• ModalButton

Import

    // JS require format
    var ModalButton = require("react-candy/Modal").ModalButton;

    // ES6 import syntax
    import { ModalButton } from 'react-candy/Modal';

PrototipedForm

A form that is auto-mounted with a prototipe.

Props

prototipe, prefill and events

Those three objects that are given to the <PrototipedForm> needs to follow some special rules:

prototipe

The prototipe prop is the most important prop for this component, because all the form is composed based on it. To mount the prototipe object you need to list all the form inputs as object params and, as <PrototipedForm> uses the <Input> component to compose, attrib to them an object with the <Input> component props:

Check out <Input> props

{
    name: {label: "Name", id: "name"},
    age: {type: "number", label: "Age", id: "age", defaultValue: 18},
    cpf: {type: "cpf", label: "CPF", id: "cpf", name: 'cpf', required: true},
    cash: {type: "money", label: "Donation", id: 'donation', name: 'cash', required: true, money: "R$", defaultValue: 5.00}
}

About the defaultValue

It's recomended to be put a defaultValue here only if it's constant (For example: You want the donators to be at least eighteen years old or you want to set a minimun amount of cash) and you probably don't want to be handling a record that comes from the server directly on the prototipe, as it is meant to be only the form skelleton.

So there is a more malleable prop for you to do that, and it's the:

prefill

The prefill prop is an object with the default value for each input on the form. It's shape is:

    {
        name: "João Clebson",
        age: 21,
        cpf: 76927237615,
        cash: 45.00,
    }

events

The events are given just like the prefill object:

    {
        onSubmit: ()=>{...},
        onReset: ()=>{...}
    }

Events won't work outside of the object.

Import

    // JS require format
    var PrototipedForm = require("react-candy/PrototipedForm");

    // ES6 import syntax
    import { PrototipedForm } from 'react-candy/PrototipedForm';

SearchField

A search field optimized for tables.

Props

ClassIndex

• SearchField
• SearchFieldMagnifier
• SearchFieldInput
• SearchFieldButtonPlaceholder
  • SearchFieldButton

The onSearch and onSubmit functions

The onSearch and onSubmit functions passes as parameter the search text and the search field.

    onSearch(searchText, searchField)
    onSubmit(searchText, searchField)

And they need to be implemented on the calling component.

Usage

    <SearchField defaultField="id" fieldsToSearch={["id", "name"]} onSearch={...} onSubmit={...}/>
    <SearchField defaultField="id" fieldsToSearch={["id"]} onSubmit={this._search}/>

Import

    // JS require format
    var SearchField = require("react-candy/SearchField");

    // ES6 import syntax
    import { SearchField } from 'react-candy/SearchField';

Selection

A table of values to apply the CRUDs RUD operations.

Props

ClassIndex

• Selection
  • SelectionTable
    • SelectionHead
      • SelectionHeadRow/SelectionRow
        • SelectionHeadCell
    • SelectionBody
      • SelectionBodyRow/SelectionRow
        • SelectionBodyCell/SelectionCell
        • SelectionButtonCell/SelectionCell
          • SelectionButtonRead/SelectionButton
          • SelectionButtonUpdate/SelectionButton
          • SelectionButtonDelete/SelectionButton

Content

The content param is an array of objects in wich the keys are the table indexes and the values are the cell contents.

    [
        {id: 0, name: 'João'},
        {id: 1, name: 'Maria'},
        {id: 2, name: 'José'},
    ]

Would result in something like:

With operation buttons on the right of each item

Table header index

The table index is mounted based on the first content's object's keys and capitalized using the capitalFirst function

Permissions

The permissions parameter is a shape of whether

{read: `bool`, update: `bool`, delete: `bool`}

or

{r: `bool`, u: `bool`, d: `bool`}

Usage

    <Selection content={[...]} permissions={r: true, u: false, d: false} onSelect={this._doSomething} onRead={this._doAnotherThing} />

Import

    // JS require format
    var Selection = require("react-candy/Selection");

    // ES6 import syntax
    import { Selection } from 'react-candy/Selection';

Author Notes

React Candy is a bunch of Components created and updated on-the-fly as I work on projects for my clients and fell the need of anything while working. Also, after wich work I'll probably update this repository a little more with new Component ideas I've created on that project.

If React Candy helped your life|work to get a little bit easier, feel free to help this project by posting a pull request with what you think that could turn our life|work and the other users a little bit easier too. Or if it didn't, feel free to help improving this project by posting another pull request with what needs improvement.

In any case. Thank you so much!