README
HTML core custom elements
Documentation
Dependencies
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