Skip to content
Branch: master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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


About

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

Topics

Resources

License

Contributors 4

  •  
  •  
  •  
  •  
You can’t perform that action at this time.