🔬 Quantum
quan·tum: any of the very small increments or parcels into which many forms of energy are subdivided
Quantum contains low-level components for building cross-platform applications in React and React Native. It aims to speed up development and allow for writing concise code.
Installation
npm install quantum@latest
Usage
import Flex Center Text Spacer Circle Input QuantumProvider from 'quantum' const theme = colors: primary: '#448aff' secondary: '#1a1a1a' fonts: mono: 'Menlo, monospace' const App = <QuantumProvider => <Flex => <Center = = = ="primary" => <Text = ="white"> Testing </Text> </Center> <Spacer = /> <Flex ="row"> <Circle ="primary" /> <Spacer = /> <Input ="test" ="secondary" ="mono" /> </Flex> </Flex> </QuantumProvider>
Base Props
All Quantum components inherit the following base props: (aliases displayed in parenthesis)
- display
- flex
- alignSelf
- justifySelf
- width (w)
- height (h)
- maxWidth (maxW)
- maxHeight (maxH)
- position (pos)
- top (t)
- right (r)
- bottom (b)
- left (l)
- margin (m)
- marginTop (mt)
- marginRight (mr)
- marginBottom (mb)
- marginLeft (ml)
- marginHorizontal (mx)
- marginVertical (my)
- padding (p)
- paddingTop (pt)
- paddingRight (pr)
- paddingBottom (pb)
- paddingLeft (pl)
- paddingHorizontal (px)
- paddingVertical (py)
- color
- background (bg)
- backgroundColor (bgColor)
- border
- borderColor
- borderRadius (radius)
- boxShadow (shadow)
- lineHeight
- characterSpacing (charSpacing)
Components
<Box />
The most basic component; essentially a standard div.
<Box></Box>
Defaults:
display: 'block'
Additional props/aliases: None
<Flex />
A basic box with flexbox styling.
<Flex ="column" ="center" ="space-between"></Flex>
Defaults:
display: 'flex'
Additional props/aliases:
- flexDirection (dir)
- alignItems (align)
- justifyContent (justify)
<Center />
A flexbox with defaults for aligning and justifying center.
<Center> <Text> centered!</Text></Center>
Defaults:
display: 'flex' alignItems: 'center' justifyContent: 'center'
Additional props/aliases:
- flexDirection (dir)
- alignItems (align)
- justifyContent (justify)
Theming
Quantum provides theming support out of the box, through React Context.
First, create a theme file like so:
// theme.js colors: text: '#1a1a1a' background: '#fff' primary: '#07c' secondary: '#05a' accent: '#609' muted: '#f6f6f6' fonts: body: 'system-ui, sans-serif' heading: 'system-ui, sans-serif' monospace: 'Menlo, monospace' fontWeights: body: 400 heading: 700 bold: 700 lineHeights: body: 15 heading: 1125
Next, import QuantumProvider
from Quantum, along with your theme, high up in your application:
// App.jsximport QuantumProvider from 'quantum'import theme from './theme' // the theme file you created { return <QuantumProvider => // The rest of your app </QuantumProvider> }
To use theme values in Quantum components, just use the theme item name as a style value:
<Box ="primary"> <Text ="body" ="secondary" ="heading"> Hello Quantum! </Text></Box>
You can also access the theme object directly with the useTheme
hook:
import useTheme from 'quantum' { const theme = console return <Box = /> }
Responsiveness
Quantum adds support for responsive styling out of the box. First, make sure your theme (see Theming) has a "breakpoints" array, like so:
breakpoints: 640 832 1024 colors: // .....
With breakpoints defined in the theme, you can now pass arrays as values to style props. The value displayed will match the index of the breakpoints array based on screen size.
// 64px on <640px screens,// 128px on <832px screens,// 256px on <1024px screens,// 512px on >=1024px screens<Box =>