Home

Synergy is a framework for building modular, configurable and scalable UI components for React-DOM projects

Features

• Style elements using either Sass or JavaScript (learn more)
• Make cosmetic UI updates to your app without modifying source code (learn more)
• Easily configure modules and create themes for your app (learn more)
• Add UI interactions without requiring class components, hooks or state (learn more)
• Everything you need to create component libraries/UI styleguides

Useful Wiki Pages

• Installation & Setup
• Modules, Components & Modifiers
• Creating a Synergy Module
• Module Configuration
• Themes

60 Second Accordion From Scratch

npm install --save react react-dom @onenexus/synergy;

accordion.jsx

import React from 'react';
import '@onenexus/synergy';

const styles = () => ({
    panel: {
        'modifier(active)': {
            title: {
                'background': '#00FFB2',
                'color': '#FFFFFF'
            }
        }
    },

    title: {
        'background': '#1E90FF',
        'color': '#005A9C',
        'padding': '1em',
        ':hover': {
            'background': '#01BFFF',
            'color': '#FFFFFF'
        }
    },

    content: content => ({
        'padding': '1em',
        'color': '#444444',
        'display': content.parent('panel').is('active') ? 'block' : 'none',
    })
});

const interactions = {
    toggle: event => event.target.parent('panel').toggleModifier('active');
}

const Accordion = ({ panels }) => (
    <Module name='accordion' styles={styles}>
        {panels.map(({ title, content }) => (
            <Component name='panel'>
                <Component name='title' onClick={interactions.toggle}>
                    {title}
                </Component>

                <Component name='content'>{content}</Component>
            </Component>
        ))}
    </Module>
);

export default Accordion;

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import Accordion from './accordion.jsx';

const data = [
    {
        title: 'accordion title 1',
        content: 'lorem ipsum'
    },
    {
        title: 'accordion title 2',
        content: <p>foo bar</p>
    }
];

const Screen = () => (
    <Accordion panels={data} />
);

ReactDOM.render(<Screen />, document.getElementById('app'));

This example is short and concise for demo purposes; for a more complete example utilising more features see the Module Example page

Overview

A Synergy module is essentially a UI component that's been broken up into the following areas of concern:

• Configuration
• Styles
• Interactions
• Interface

These are the main concerns of a UI module; Synergy allows you to work on each concern independently before bringing them together to form a Synergy module.

Synergy is ideal for creating presentational React components when using the Container Component Pattern (learn more)

For more information see the About Synergy page.