Home

Synergy is a front-end framework for building modular, configurable and scalable UI components for React apps

Features

• Style elements using either Sass or JavaScript (learn more)
• Make 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 or hooks (learn more)
• Everything you need to create component libraries/UI styleguides (learn more)

Useful Wiki Pages

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

60 Second Accordion From Scratch

npm install --save react @onenexus/synergy;

accordion.jsx

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

const styles = () => ({
    title: {
        'background': 'DodgerBlue',
        'padding': '1em',
        'color': '#444444',
        ':hover': {
            'background': 'DeepSkyBlue',
            'color': 'white'
        },
        'active': {
            'background': 'LightSeaGreen',
            'color': 'white'
        }
    },

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

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

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

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

export default Accordion;

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.

Useful Reading

• TODO