float-ui

float

A library for creating user interfaces.

Installation

$ npm install react-ui --save

Example

const Float = require('float-ui');
 
Float.createElement('HelloButton', {
  render: function() {
    return '<button>Hello ' + this.props.name + '</button>';
  }
});
 
console.log(Float.renderElement('<HelloButton name="Phil" />'));
// => <button>Hello Phil</button>

API Documentation

createElement(name, element)

Create a new element.

Parameters:

• name: String_
• element: Object
  • getDefaultProps: Function (Returns Object)
  • render: Function (Returns String)
    • this context:
      • props: Object
      • children: String

Returns: undefined

Example:

Float.createElement('AwesomeButton', {
  getDefaultProps: function() {
    return {type: 'primary'};
  },
 
  render: function() {
    return '<button class="btn btn-' + this.props.type + '">' + this.children + "</button>";
  }
});

extendElements(elements)

Add elements to the current Float instance from other Float instances.

Parameters:

• elements: Object

Returns: undefined

Example:

const Float = require('float-ui');
const Float_PS = require('float-ps');
 
console.log(Float.getElements());
// => {HelloButton: {render: function() {...}}}
 
console.log(FLOAT_PS);
// => {break: {render: function() {...}}, CommandButton: {render: function() {...}}
 
Float.extendElements(FLOAT_PS);
 
console.log(Float.getElements());
// => {HelloButton: {render: function() {...}}, break: render: function() {...}, CommandButton: {render: function() {...}}}

getElements()

Parameters: None

Returns: Object

Example:

console.log(Float.getElements());
// => {someElement: {render: function() {...}}, someOtherElement: {getDefaultProps: function() {...}, render: function() {...}}

renderElement(html)

Renders an element.

Parameters:

• html: String

Returns: String

Examples:

console.log(Float.renderElement('<b>hi</b>'));
// => <b>hi</b>
 
console.log(Float.renderElement('<AwesomeButton type="Danger">Delete</AwesomeButton>'));
// => <button class="btn btn-primary">Delete</button>
 
console.log(Float.renderElement('<div><h1>Welcome!</h1><HelloButton name="Phil" /></div>'))
// => <div><h1>Welcome!</h1><button>Hello Phil</button></div>

LICENSE

MIT