Re-cy-cle NPM | npm.io

re-cy-cle

A React component library for Code Yellow.

Note that this library is still experimental; we're using it in one production application in Code Yellow now. A lot of components still need to be added and fine-tuned.

Demo / overview of all components

Install

yarn add re-cy-cle
npm i re-cy-cle --save

Usage

The components are documented in the demo, in the top-right you can press "Show Info" to see all the possible props for that component.

An example:

import React from 'react';
import ReactDOM from 'react-dom';
import { ReCyCleTheme, Button } from 're-cy-cle';

ReactDOM.render(
    <ReCyCleTheme>
        <Button>Foobar</Button>
    </ReCyCleTheme>,
    document.getElementById('root')
);

<ReCyCleTheme /> accepts a theme prop, which can be used to change some project-wide settings. An example:

const theme = {
    primaryColor: '#006b94',
};

<ReCyCleTheme theme={theme} />

See all settings.

Internationalization

By default re-cy-cle will use English for a few items which use translations. To override this you can change the translation function.

import { configureTranslation } from 're-cy-cle';

function myTranslationFunction(key) {
    // Insert your logic here
}

configureTranslation(myTranslationFunction);