Synergy is a framework for building modular, configurable and scalable UI components for React-DOM projects
Features
- Style Modules using either Sass or JavaScript
- Make cosmetic UI updates to your app without modifying source code (learn more)
- Easily configure modules and create themes for your app
- Ideal for creating presentational React components
- ...for use with Component Libraries/UI Styleguides/Design Systems
Useful Wiki Pages
- Installation & Setup
- Intro: 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 { Module, Component } from '@onenexus/synergy';
const styles = {
fontFamily: 'sans-serif',
heading: ({ context }) => ({
backgroundColor: '#1E90FF',
color: 'white',
padding: '1em',
cursor: 'pointer',
...(context.panel.open && {
backgroundColor: '#00FFB2'
}),
':hover': {
backgroundColor: '#01BFFF'
}
}),
content: ({ context }) => ({
padding: '1em',
color: '#444444',
display: context.panel.open ? 'block' : 'none'
})
}
const Accordion = ({ panels, ...props }) => {
const [current, toggle] = useState(0);
return (
<Module name='Accordion' styles={styles} { ...props }>
{panels.map(({ heading, content }, i) => (
<Component name='panel' open={i === current}>
<Component name='heading' onClick={() => toggle(i === current ? -1 : i)}>
{heading}
</Component>
<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 Creating a Module page
