Building components

We saw in the View chapter that a Surface takes CSS properties in its constructor for its layout.

Creating pure Surface objects all the way might not be awesome when you need to make an entire consistently styled app. Instead of copy pasting your styling all over the place, make reusable components!

import {combineOptions}     from 'arva-js/utils/CombineOptions.js';
import Surface              from 'famous/core/Surface.js';

export class Text extends Surface {
    constructor(options) {
        super(combineOptions({
            properties: {
                fontFamily: 'monospace',
                fontSize: '14px',
                lineHeight:'110%',
                fontWeight: 'lighter',
                color: "#333"
            }
        }, options));
    }
}

There we go. Now we can make freshly styled text surfaces faster than a hungry kid chasing an ice cream truck:

import {Text}               from './path/to/component/Text.js';
import {layout}            from 'arva-js/layout/decorators.js';
import {View}              from 'arva-js/core/View.js';

export class ComponentDemoView extends View {
    @layout.place('center')
    @layout.size(300, 100)
    text = new Text({content: 'This text is styled.'});
}