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

Prop	Description
href	Link to wich button will redirect

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

Prop	PropType	Required?	defaultValue	Description
`type`	`string`	no	"text"	The input type to be rendered
`label`	`string`	yes	-	The input's label
`id`	`string`	yes	-	This id is needed to assign the label to the input
`name`	`string`	no	-	The input name to be submit on `action`ed forms
`defaultValue`	`string` or `number`	no	-	Input initial value
`readOnly`	`bool`	no	false	Use if you want the input to be read-only
`listOptions`	array of `string`	no	-	Used when the type is `list`, here you list the options of the `list` in an `array`.
`required`	`bool`	no	-	Used to mark if the input is required
`money`	`string`	no	'$'	The currency to display when using type `money`
`placeholder`	`string`	no	-	Input's placeholder
`imAwareOfTheRisk`	`bool`	no	-	Put a defaultValue on a `password` type field is dangerous and it could be easily discovered with code inspection. But if you still want to use it (Without being anoiyed with a warning message) use this prop
event props	func	no	-	The `Input` component supports `HTML` default events - On `React`'s way- (Started with `on-` and camel-case)

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

Prop	Required?	PropType	defaultValue	Description
`id`	yes	`string`	-	`Modal`'s id for behavior to work
`modalWillShow`	no	`func`	-	Function to run just before modal mount
`modalDidShow`	no	`func`	-	Function to run right after modal mount
`modalCloseLabel`	no	`string` \| `object`	" × "	Label to put on `modal`'s close button

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

Prop	Required?	PropType	Description
`modalToShow`	yes	`string`	The `id` of the `Modal` to be shown
`onClick`	no	`func`	`onClick` function. It have as parameter the respective event object

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

Prop	PropType	Required?	defaultValue	Description
title	`string`	no	-	A title to the `form`
prototipe	`object`	yes	-	The prototipe to be used on the `form` composition
method	`string`	no	'post'	The `form`'s action method ('GET', 'POST', ...)
action	`string`	no	-	`Form`'s action when submited
readOnly	`bool`	no	false	Makes the entire form read-only
submitLabel	`string`	no	-	The label of the submit button
prefill	`object`	no	-	An `object` with the default values for the inputs, with the shape of `{inputName: value}`
prefilled	`bool`	no	false	A flag indicating whether or not the `form` is prefilled
className	`string`	no	-	The `form`'s placeholder `class`
innerFormClass	`string`	no	-	The `class` of the `form` tag itself
id	`string`	no	-	The `form`'s placeholder `id`
innerFormId	`string`	no	-	The `id` of the `form` tag itself
events	`object`	no	-	An `object` containing the `Form` events. E.g: {onClick: ()=>{...}}

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

Prop	PropType	required?	Description
`defaultField`	`string`	yes	Default field to search
`onSearch`	`func`	no	Function to run when the field changes
`fieldsToSearch`	array of `string`	yes	Array of fields to search
`onSubmit`	`func`	no	Function to run when the "Enter" key is pressed

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

Prop	PropType	required?	Description
`onSelect`	`func`	yes	Function to execute when an item is selected (clicked)
`onRead`	`func`	no	Function to execute when an item's read button is pressed
`onUpdate`	`func`	no	Function to execute when an item's update button is pressed
`onDelete`	`func`	no	Function to execute when an item's delete button is pressed
content	array of `object`	yes	The array of objects to fill the table
permissions	shape of {read: `bool`, update: `bool`, delete: `bool`} or {r: `bool`, u: `bool`, d: `bool`}	no	Permission object to controll wich operation buttons will be available

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:

Id	Name
0	João
1	Maria
2	José

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`}

{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!

react-candy

React Candy

Note

Button

Props

ClassIndex

Import

Usage

Input

Props

Types available

The readOnly prop

Usage

Using with a <form> tag

Use with React Candy's <PrototipedForm>

ClassIndex

Import

Modal

Props

Usage

ClassIndex

Import

ModalButton

Props

Usage

ClassIndex

Import

PrototipedForm

Props

prototipe, prefill and events

prototipe

About the defaultValue

prefill

events

Import

SearchField

Props

ClassIndex

The onSearch and onSubmit functions

Usage

Import

Selection

Props

ClassIndex

Content

Table header index

Permissions

Usage

Import

Author Notes

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Last publish

Collaborators

The `readOnly` prop

Using with a `<form>` tag

Use with React Candy's `<PrototipedForm>`

Weekly Downloads