npm:@onenexus/synergy

README

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

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

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.

Usage no npm install needed!