Home
Edmund Reed edited this page Jan 31, 2019
·
87 revisions
Synergy is a front-end framework for building modular, configurable and scalable UI components for React apps
- 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)
- Installation & Setup
- Modules, Components & Modifiers
- Creating a Synergy Module
- Module Configuration
- Themes
npm install --save react @onenexus/synergy;
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;
todo
This example is short and concise for demo purposes; for a more complete example utilising more features see the Module Example page
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.