No nonsense JavaScript styling for React DOM projects

• Overview
• Installation/Setup
• API

Overview

Lucid is a collection of React Components that should be used to create your Presentational Components. Lucid uses state and context to determine which styles to apply to a given Element; it maps CSS keys from your styles Object to Components with a matching name prop (with top level keys applying to the parent Module), avoiding the need for class names.

Checkout this example to see how Lucid can be used to create a simple UI accordion that is both styled and functional:

View a live demo of this example on CodeSandbox

import React, { useState } from 'react';
import { Module, Component } from '@onenexus/lucid';

const styles = () => ({
  heading: ({ context, state }) => ({
    backgroundColor: 'red',
    
    ...(context.panel.open && {
      backgroundColor: 'blue'
    }),
    
    ':hover': {
      backgroundColor: 'purple'
    },

    // ...or alternatively:
    ...(state.isHovered && {
      backgroundColor: 'purple'
    })
  }),

  content: ({ context }) => ({
    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;

For a more fleshed out example, see the demo from the Synergy Wiki

Features

• Built to prioritise Developer Experience (DX)
• It's just JavaScript; no CSS selectors as object keys etc...
• No CSS classes or className props required
• Improve the readability of your source code
• Improve the readability of your production code (why is this important?)
• Media Queries
• Pseudo States/Elements (:hover, :focus, :before, :after)
• Based off state and context - not only the most fiendly API but the most flexible
• Inherent flexible nature supports themes, configuration etc without dedicated APIs (though they are provided)
• Automagically identify cosmetic style properties from configuration/state/props

How it Works

• Utilises React's context API under the hood
• Singular styles object (or function that returns an object) passed to <Module>
• Styles are mapped to child Components by matching keys with <Component> name props
• Parent props/state are available as context, self props/state are available as state

NOT CSS-in-JS!

Whilst Lucid is a JavaScript tool for authoring styles, we don't consider it to be "CSS-in-JS". CSS is a language with its own rules and concepts such as classes, selectors, pseudo-elements, cascading, etc. Lucid is not a tool for translating CSS paradigms into JavaScript (unlike other solutions) - it is a tool for applying CSS properties to your React Components using a super friendly API. It results in inline-styles being applied to the DOM - Lucid doesn't generate any CSS.

Installation/Setup/Usage

npm install --save @onenexus/lucid

Basic

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

• <Module>
• <Component>

All Lucid Components

import { 
  Module,
  Component,
  SubComponent,
  Wrapper,
  Group,
  Provider
} from '@onenexus/lucid';

• <Module>
• <Component>
• <SubComponent>
• <Wrapper>
• <Group>
• <Provider>
• styled

Lucid Hooks

import { useConfig, useTheme, useUtils } from '@onenexus/lucid';

• useConfig
• useTheme
• useUtils

---