HTML core custom elements

Documentation

Documentation | JSDoc

Dependencies

• React.js
• X-Tag core (custom build xtag.js)
• es5-shim

Browser support

• Firefox 14+
• Internet Explorer 9+
• Chrome 4+
• Safari 4+
• Opera 12+

Example ES6

import React from 'react';
import { element } from 'xblocks-core';

@element('xb-element')
class XBElement extends React.Component {
    render() {
        return (
            <div title={this.props.title}>{this.context.content()}</div>
        );
    }
}

XBElement.propTypes = {
    title: React.PropTypes.string
};

Example

<!-- element usage -->
<xb-ico type="notification">8</xb-ico>

// define element
import { create } from 'xblocks-core';

create('xb-ico');

// define view
import { PropTypes } from 'react';
import { view } from 'xblocks-core';
import classnames from 'classnames';

view.register('xb-ico', {
    displayName: 'xb-ico',

    propTypes: {
        size: PropTypes.oneOf([ 's', 'm', 'l', 'xl' ]),
        type: PropTypes.oneOf([ 'remove', 'notification', 'check', 'dropdown' ]),
        active: PropTypes.bool,
        disabled: PropTypes.bool
    },

    getDefaultProps: function() {
        return {
            size: 'm',
            children: String.fromCharCode(160)
        };
    },

    render: function() {
        const classes = classnames({
            'xb-ico': true,
            '_active': this.props.active,
            '_disabled': this.props.disabled,
            [ `_type-${this.props.type}` ]: Boolean(this.props.type),
            [ `_size-${this.props.size}` ]: Boolean(this.props.size)
        });

        return (
            <span className={classes}>{this.context.content()}</span>
        );
    }
});

Install

npm install xblocks-core

bower install xblocks-core