One-Nexus / Synergy

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

60 Second Accordion From Scratch

npm install --save react react-dom @onenexus/synergy;

View a live demo of this example in CodeSandbox

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