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: 3 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 9 years ago)
• Default Branch: master
• Last Pushed: 2023-06-23T01:47:12.000Z (over 1 year ago)
• Last Synced: 2024-07-18T15:30:28.077Z (4 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: 8
• Forks: 10
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/One-Nexus/Synergy/blob/master/LICENSE)

[![Build status](https://api.travis-ci.com/One-Nexus/Synergy.svg)](https://travis-ci.com/One-Nexus/Synergy)

[![npm version](https://badge.fury.io/js/%40onenexus%2Fsynergy.svg)](https://www.npmjs.com/package/@onenexus/synergy)

[![npm downloads](https://img.shields.io/npm/dm/@onenexus/synergy.svg)](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

---