Skip to content

Synergy is a framework for building modular, configurable and scalable UI components for React-DOM projects

License

Notifications You must be signed in to change notification settings

One-Nexus/Synergy

Repository files navigation

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 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
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 { 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