- Notifications
You must be signed in to change notification settings - Fork10
Synergy is a framework for building modular, configurable and scalable UI components for React-DOM projects
License
NotificationsYou must be signed in to change notification settings
One-Nexus/Synergy
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Synergy is a framework for building modular, configurable and scalable UI components for React-DOM projects
- Style Modules using eitherSass orJavaScript
- Make cosmetic UI updates to your app without modifying source code (learn more)
- Easilyconfigure modules and createthemes for your app
- Ideal for creating presentational React components
- ...for use with Component Libraries/UI Styleguides/Design Systems
- Installation & Setup
- Intro: Modules, Components & Modifiers
- Creating a Synergy Module
- Module Configuration
- Themes
| Synergy Boilerplate (Javascript Styles) | Synergy Boilerplate (Sass Styles) |
npm install --save react react-dom @onenexus/synergy;importReact,{useState}from'react';import{Module,Component}from'@onenexus/synergy';conststyles={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'})}constAccordion=({ panels, ...props})=>{const[current,toggle]=useState(0);return(<Modulename='Accordion'styles={styles}{ ...props}>{panels.map(({ heading, content},i)=>(<Componentname='panel'open={i===current}><Componentname='heading'onClick={()=>toggle(i===current ?-1 :i)}>{heading}</Component><Componentname='content'content={content}/></Component>))}</Module>);}exportdefaultAccordion;
importReactfrom'react';importReactDOMfrom'react-dom';importAccordionfrom'./accordion.jsx';constdata=[{heading:'accordion heading 1',content:'lorem ipsum'},{heading:'accordion heading 2',content:<p>foo bar</p>}];constScreen=()=>(<Accordionpanels={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 theCreating a Module page
About
Synergy is a framework for building modular, configurable and scalable UI components for React-DOM projects
Topics
Resources
License
Stars
Watchers
Forks
Packages0
No packages published