Page Decorator

@page decorator is used to setup basic configuration and state for specific page, that means you can set page title or other page state by using this decorator.

Basic Usage

Load and attach @page decorator to class for being able to use methods which can be used to setup page component. Here is example to show how to set page title with @page decorator:

import { page } from 'Decorator';

@page({ title: 'My Page' });
class MyPage extends React.Component {
    // ...
}

Add Open Graph Meta Tags

Sharing a link to Facebook is good for promoting and advertising. Facebook is using a protocol called Open Graph Meta Tags to recognize a link and its content. By customizing metadata, we can describe the details and cover photo for page to tell Facebook what kind of content is exactly we have.

import { page } from 'Decorator';

@page({
    title: 'My Page',
    ogMeta: {
        'og:title': 'My Page',
        'og:image': 'http://example.com/test.jpg'
    }
});
class MyPage extends React.Component {
    // ...
}

Advance Usage

You might want to set window title or meta data by using information of store. @page decorator allows to give a function to do works and process data then set page properties.

import { page } from 'Decorator';

@page((handle) => {

    return {
        title: handle.flux.getState('Friends').name,
        ogMeta: {
            'og:title': handle.flux.getState('Friends').name,
            'og:image': 'http://example.com/' + handle.flux.getState('Friends').avatar + '.jpg'
        }
    };
});
class MyPage extends React.Component {
    // ...
}

Note that getting waited for updates of specific store is possible, just using @wait decorator to make it.