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
Boilerplates
| Synergy Boilerplate (Javascript Styles) | Synergy Boilerplate (Sass Styles) |
60 Second Accordion From Scratch
npm install --save react react-dom @onenexus/synergy;
accordion.jsx
import React, { useState } from 'react';
import '@onenexus/synergy';
const styles = {
'font-family': 'sans-serif',
panel: panel => ([
{
condition: () => panel.is('open'),
styles: {
heading: {
'background': '#00FFB2',
'color': '#FFFFFF'
}
}
}
]),
heading: {
'background': '#1E90FF',
'color': '#005A9C',
'padding': '1em',
':hover': {
'background': '#01BFFF',
'color': '#FFFFFF'
}
},
content: content => ({
'padding': '1em',
'color': '#444444',
'display': content.parent('panel').is('open') ? 'block' : 'none'
})
};
const Accordion = ({ panels }) => (
<Module name='accordion' styles={styles}>
{panels.map(({ heading, content }) => {
const [isOpen, toggle] = useState(false);
return (
<Component name='panel' open={isOpen}>
<Component name='heading' content={heading} onClick={() => toggle(!isOpen)} />
<Component name='content' content={content} />
</Component>
);
})}
</Module>
);
export default Accordion;Usage
import React from 'react';
import ReactDOM from 'react-dom';
import Accordion from './accordion.jsx';
const data = [
{
heading: 'accordion heading 1',
content: 'lorem ipsum'
},
{
heading: 'accordion heading 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.
