float-ui
v1.0.5
Published
A library for creating user interfaces.
Downloads
29
Maintainers
Readme
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
: ObjectgetDefaultProps
: Function (Returns Object)render
: Function (Returns String)- this context:
props
: Objectchildren
: String
- this context:
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>