Lucid: A JavaScript repository from One-Nexus

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';

All Lucid Components

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

Lucid Hooks

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

One-Nexus/Lucid