@endui/react v0.0.3

endui

A library for creating user interfaces.

Installation

$ npm i @endui/react

Example

import {Button, buttonVariants} from '@endui/react;

<Button variant="ghost" size="lg">
  Hello world
</Button>


<button className={buttonVariants({
  variant: 'ghost',
  className: 'w-fit',
  size: 'lg',
})}
>
  Hello button
</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>'
    );
  },
});

extendUIofComponents(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