No nonsense JavaScript styling for React DOM projects
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 Component; it maps keys from your styles object to Components with a matching name
prop, avoiding the need for class names.
Checkout this example to see how Lucid can be used to create a simple UI accordion:
import React, { useState } from 'react';
import { Module, Component } from '@onenexus/lucid';
const styles = () => ({
heading: ({ context, state }) => ({
backgroundColor: 'red',
...(context.panel.isOpen && {
backgroundColor: 'blue'
}),
':hover': {
backgroundColor: 'purple'
},
// ...or alternatively:
...(state.isHovered && {
backgroundColor: 'purple'
})
}),
content: ({ context }) => ({
display: context.panel.isOpen ? 'block' : 'none'
})
});
const Accordion = ({ panels, ...props }) => {
const [activeIndex, toggle] = useState(0);
return (
<Module name='Accordion' styles={styles} { ...props }>
{panels.map(({ heading, content }, index) => (
<Component name='panel' isOpen={index === activeIndex}>
<Component name='heading' onClick={() => toggle(index === activeIndex ? -1 : index)}>
{heading}
</Component>
<Component name='content' content={content} />
</Component>
))}
</Module>
);
}
export default Accordion;
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 asstate
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
npm install --save @onenexus/lucid
Basic
import { Module, Component } from '@onenexus/lucid';
Complete
import {
Module,
Component,
SubComponent,
Wrapper,
Group,
Provider
} from '@onenexus/lucid';