styled

This is an experimental API

The styled helper function can be used to improve the readability of your JSX, and offers a syntax that is somewhat similar to Styled-Components.

• Define your Components upfront as functions that accept a props argument
• Return a styled call
  • passing the name of your Component (the same name used in your styles)
  • as well as the props argument
  • and an optional HTML tag to render (defaults to div)
• Use your new Components in your JSX
• <Module> is required as normal to act as the provider

import { Module, styled } from '@onenexus/lucid';
import styles from './styles';

const Panel   = (props) => styled('panel', props, 'article');
const Heading = (props) => styled('heading', props, 'h3');
const Content = (props) => styled('content', props);

const Accordion = ({ panels }) => (
  <Module styles={styles} {...props}>
    {panels.map(({ heading, content }) => {
      const [isOpen, toggle] = useState(false);

      return (
        <Panel isOpen={isOpen}>
          <Heading onClick={() => toggle(!isOpen)}>{heading}</Heading>
          <Content>{content}</Content>
        </Panel>
      );
    })}
  </Module>
);

export default Accordion;

...vs:

import { Module, Component } from '@onenexus/lucid';
import styles from './styles';

const Accordion = ({ panels }) => (
  <Module styles={styles} {...props}>
    {panels.map(({ heading, content }) => {
      const [isOpen, toggle] = useState(false);

      return (
        <Component name='panel' tag='article' isOpen={isOpen}>
          <Component name='heading' tag='h3' onClick={() => toggle(!isOpen)}>
            {heading}
          </Component>
          <Component name='content'>
            {content}
          </Component>
        </Component>
      );
    })}
  </Module>
);

export default Accordion;