https://github.com/One-Nexus/Synergy
Synergy is a framework for building modular, configurable and scalable UI components for React-DOM projects
https://github.com/One-Nexus/Synergy
bem javascript modular-css react react-components sass sass-mixins synergy theme
Last synced: 4 months ago
JSON representation
Synergy is a framework for building modular, configurable and scalable UI components for React-DOM projects
- Host: GitHub
- URL: https://github.com/One-Nexus/Synergy
- Owner: One-Nexus
- License: mit
- Created: 2015-07-21T22:58:45.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-06-23T01:47:12.000Z (over 2 years ago)
- Last Synced: 2025-06-19T22:05:46.983Z (5 months ago)
- Topics: bem, javascript, modular-css, react, react-components, sass, sass-mixins, synergy, theme
- Language: JavaScript
- Homepage:
- Size: 3.89 MB
- Stars: 149
- Watchers: 7
- Forks: 10
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/One-Nexus/Synergy/blob/master/LICENSE)
[](https://travis-ci.com/One-Nexus/Synergy)
[](https://www.npmjs.com/package/@onenexus/synergy)
[](https://www.npmjs.com/package/@onenexus/synergy)
> Synergy is a framework for building modular, configurable and scalable UI components for React-DOM projects
###### Features
* Style Modules using either [Sass](https://github.com/One-Nexus/Synergy/wiki/Using-Sass-With-Synergy) or [JavaScript](https://github.com/One-Nexus/Synergy/wiki/Styling-Modules#styling-a-module-with-javascript)
* Make cosmetic UI updates to your app without modifying source code ([learn more](https://github.com/One-Nexus/Lucid/wiki/Config#retreiving-cosmetic-styles-from-config))
* Easily [configure modules](https://github.com/One-Nexus/Synergy/wiki/Module-Configuration) and create [themes](https://github.com/One-Nexus/Synergy/wiki/Themes) for your app
* Ideal for creating presentational React components
* ...for use with Component Libraries/UI Styleguides/Design Systems
###### Useful Wiki Pages
* [Installation & Setup](https://github.com/One-Nexus/Synergy/wiki/Installation)
* [Intro: Modules, Components & Modifiers](https://github.com/One-Nexus/Synergy/wiki/Modules,-Components-and-Modifiers)
* [Creating a Synergy Module](https://github.com/One-Nexus/Synergy/wiki/Creating-a-Module)
* [Module Configuration](https://github.com/One-Nexus/Synergy/wiki/Module-Configuration)
* [Themes](https://github.com/One-Nexus/Synergy/wiki/Themes)
###### Boilerplates
Synergy Boilerplate (Javascript Styles)
Synergy Boilerplate (Sass Styles)
## 60 Second Accordion From Scratch
```
npm install --save react react-dom @onenexus/synergy;
```
> [View a live demo of this example in CodeSandbox](https://codesandbox.io/s/synergy-demo-t5qkd)
###### accordion.jsx
```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 (
{panels.map(({ heading, content }, i) => (
toggle(i === current ? -1 : i)}>
{heading}
))}
);
}
export default Accordion;
```
###### Usage
```jsx
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:
foo bar
}
];
const Screen = () => (
);
ReactDOM.render(, 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](https://github.com/One-Nexus/Synergy/wiki/Creating-a-Module) page
---
