babelfish-plus
Babelfish based i10n
Last updated 4 years ago by zerkalica .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install babelfish-plus 
SYNC missed versions from official npm registry.

babelfish-plus

Babelfish react helpers. Can be used for rendering props as react widgets. All babelfish power accessible from helper. Returns array of translated strings and functions:

t(message: string, params: ?Map<string, string|object|func>): Array<string|object|func>|string

t('Translated') // 'Translated'
t('Translated #{str}', {str: 'test'}) // 'Translated test'
t('Translated #{str} #{func} #{obj} #{arr}', {
    t: 'test',
    func: p => p,
    obj: {a: 1},
    arr: [1, 2, 3]
}) // ['Translated test', func, {a: 1}, [1, 2, 3]]

As library

import translator from 'babelfish-plus'

const options = {
    locale: 'ru',
    phrases: {
        user: {
            birthday: 'День рождения: #{date}'
        }
    }
}
const t = translator(options)

t('user.birthday', {date: '01.01.1970'}) // 'День рождения: 01.01.1970'
t('user.birthday', {date: p => new Date(p)}) // ['День рождения: ', Func]
t('not.existing.path') // 'not.existing.path'

React component

import React, {PropTypes} from 'react'
import translator from 'babelfish-plus'
import T from 'babelfish-plus/react/T'
const {func, string} = PropTypes

class Date extends React.Component {
    static propTypes = {
        date: string.isRequired
    }

    render() {
        return (
            <span className="date">{this.props.date}</span>
        )
    }
}

class UserBirthday extends React.Component {
    static propTypes = {
        date: string.isRequired
    }

    render() {
        return (
            <div>
                <T>User info</T>
                <T date={<Date value={this.props.date} />}>user.birthday</T>
            </div>
        )
    }
}

class App extends React.Component {
    static propTypes = {
        t: func.isRequired,
        birthday: string.isRequired
    }

    static childContextTypes = {
        t: func
    }

    getChildContext() {
        return {
            t: this.props.t
        }
    }

    render() {
        return (
            <UserBirthday date={this.props.birthday} />
        )
    }
}

const options = {
    locale: 'ru',
    phrases: {
        'User info': 'О пользователе',
        user: {
            birthday: 'День рождения: #{date}'
        }
    }
}
const t = translator(options)

React.render(<App t={t} birthday="01.01.1970" />, document.geteElementById('root'))

Current Tags

  • 0.0.12                                ...           latest (4 years ago)

10 Versions

  • 0.0.12                                ...           4 years ago
  • 0.0.11                                ...           4 years ago
  • 0.0.10                                ...           5 years ago
  • 0.0.8                                ...           5 years ago
  • 0.0.7                                ...           5 years ago
  • 0.0.6                                ...           5 years ago
  • 0.0.5                                ...           5 years ago
  • 0.0.4                                ...           5 years ago
  • 0.0.3                                ...           5 years ago
  • 0.0.2                                ...           5 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (3)
Dev Dependencies (14)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |