@onenexus/synergy

4.0.0-beta.27 • Public • Published

GitHub license Build status npm version npm downloads

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.


Package Sidebar

Install

npm i @onenexus/synergy

Weekly Downloads

1

Version

4.0.0-beta.27

License

MIT

Unpacked Size

91.7 kB

Total Files

14

Last publish

Collaborators

  • esr360