react-html-components

Generic html react components for materializecss

![Build
Status](https://travis-ci.org/react-html-components/react-html-components) ![npm
version](https://npmjs.org/package/react-html-components "View this project on npm")

$3

#### Install npm package
npm install --save react-html-components

This package requires materializecss.

#### Usage
import {TextInput, Switch} from 'react-html-components';

$3

1. Form elements
1. input type text (TextInput)
2. input type email (EmailInput)
3. input type password (PasswordInput)
4. input type radio (RadioButton)
5. input type checkbox (Checkbox)
6. switch (Switch)
2. Icons
1. Icon
2. TinyIcon
3. SmallIcon
4. MediumIcon
5. LargeIcon
2. Buttons
1. Button
2. LargeButton
3. FlatButton
4. FloatingButton
3. Modal

Documentation

$3

#### Common attributes
* value - type string;
* checked - type boolean;
* name - type string;
* disabled - type boolean;
* id - type string;
* required - type boolean;
* extraClass - type string (is added to class attribute of );
* label - type string (injected with dangerouslySetInnerHTML);
* changeCallback - type function (executed when input changes value/checked);
* mouseEnterCallback - type function (executed on hover of );
* mouseLeaveCallback - type function (executed on mouse leave the );

#### Methods

Following accessor methods are available through the React\s refs:
* value - getter/setter;
* checked - getter/setter;
* disabled - getter/setter;
* required - getter/setter;
* type - getter;

Example:
`
someMethod(){
this.refs.textInput.value("new value"); // setter
this.refs.textInput.value() // getter
}
.......
render(){
return (

);
`

#### TextInput (type="text")

Supports common attributes.

##### Attributes
* placeholder - type string;

#### PasswordInput (type="password")

Supports common attributes.

##### Attributes
* placeholder - type string;

#### EmailInput (type="email")

Supports common attributes.

##### Attributes
* placeholder - type string;
* validate - type bool (reference materializecss documentation);
* errorMessage - type string (data-error attribute of );
* successMessage - type string (data-success attribute of );

#### Checkbox (type="checkbox")

Supports common attributes.

#### RadioButton (type="radio")

Supports common attributes.

##### Attributes
* withGap - type bool (reference materializecss documentation);

$3

#### Icon - base icon component
#### Attributes
* classes - type Array of css classes which will be concatenated with space;
* iconName - type string - reference to materializecss docs;
* size - type string (one of ["","tiny","small","medium","large"]);

#### TinyIcon (type={"tiny"})
#### SmallIcon (type={"small"})
#### MediumIcon (type={"medium"})
#### LargeIcon (type={"large"})

Example:
`
import { SmallIcon } from 'react-html-components';

.......

render(){
return (

);

`

$3

#### Button
Button - is a base component for buttons.

#### Methods (available through refs)
* disabled - setter/getter;

#### Attributes
* classes - type Array of css classes which will be concatenated with space;
* clickCallback - type func - will be triggered on click (is not triggered on disabled buttons);
* disabled - type bool;
* type - type oneOf(["", "btn-large", "btn-flat", "btn-floating"]) - should not be used normaly;


#### LargeButton (Button type={"btn-large"})
#### FlatButton (Button type={"btn-flat"})
#### FloatingButton (Button type={"btn-floating"})

Example:
`
import { LargeButton } from 'react-html-components';

.......

render(){
return (
Test Button
);

`

$3

#### Attributes
* type - type string (default modal, if empty; bottom-sheet, modal-fixed-footer);

#### Methods (available through refs)
* open - open modal;
* close - close modal;

Example:
`
import { Modal, ModalContent, ModalFooter, FlatButton } from 'react-html-components';

render(){
return (


Content


Agree


);

openModal(){
this.refs.modal.open();
}

closeModal(){
this.refs.modal.close();
}

``