react-html-components

Generic react html components for materializecss

Usage no npm install needed!

<script type="module">
  import reactHtmlComponents from 'https://cdn.skypack.dev/react-html-components';
</script>

README

react-html-components

Generic html react components for materializecss


[![Build Status](https://travis-ci.org/mykhailokoretskyi/react-html-components.svg?branch=master)](https://travis-ci.org/react-html-components/react-html-components) [![npm version](http://img.shields.io/npm/v/react-html-components.svg?style=flat)](https://npmjs.org/package/react-html-components "View this project on npm")

Getting started

Install npm package

npm install --save react-html-components

This package requires materializecss.

Usage

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

Currently supported materialize elements:

  1. Form elements
  2. input type text (TextInput)
  3. input type email (EmailInput)
  4. input type password (PasswordInput)
  5. input type radio (RadioButton)
  6. input type checkbox (Checkbox)
  7. switch (Switch)
  8. Icons
  9. Icon
  10. TinyIcon
  11. SmallIcon
  12. MediumIcon
  13. LargeIcon
  14. Buttons
  15. Button
  16. LargeButton
  17. FlatButton
  18. FloatingButton
  19. Modal

Documentation

Form elements

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 <input/>);
  • label - type string (injected with dangerouslySetInnerHTML);
  • changeCallback - type function (executed when input changes value/checked);
  • mouseEnterCallback - type function (executed on hover of <input/>);
  • mouseLeaveCallback - type function (executed on mouse leave the <input/>);

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 ref="textInput" value="initial value" />
);

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 <input/>);
  • successMessage - type string (data-success attribute of <input/>);

Checkbox (type="checkbox")

Supports common attributes.


RadioButton (type="radio")

Supports common attributes.

Attributes

Icons

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 (
    <SmallIcon classes={["left"]} iconName={"cloud"} />
);


Buttons

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 (
    <LargeButton disabled={true}>Test Button</LargeButton>
);


Modal

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 (
    <Modal ref="modal" type="bottom-sheet">
      <ModelContent>
        Content
      </ModalContent>
      <ModalFooter>
        <FlatButton classes={["modal-action modal-close waves-effect waves-green"]}>Agree</FlatButton>
      </ModelFooter>
    </Modal>
);

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

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