Jaak-primitives NPM

Primitives 🏗

UI primitives with predictable, unopinionated defaults and HTML-based semantics for scalable application architecture

Install

npm install jaak-primitives

Usage

import { Text } from 'jaak-primitives'

const Component = () => (
  <Text>Hello primitives!</Text>
)

Composition

Primitives can be extended at application-level and composed into React components.

import { Button, Text, View } from 'jaak-primitives'

// Extend primitives with custom attributes
const PrimaryButton = Button.extend`
  box-shadow: ${({ boxShadow }) => boxShadow};
`

// Change the HTML tag used to render a primitive
const AnchorButton = Button.withComponent('a')

// Compose library and application-level primitives
const Component = () => (
  <View>
    <Text color='primary'>
      I 💖 Primitives!
    </Text>

    <AnchorButton>
      I want to be an ⚓️
    </AnchorButton>

    <PrimaryButton boxShadow='4px 2px 4px black'>
      🏗
    </PrimaryButton>
  </View>
)

Theming

Generate a theme that can be used with styled-components <ThemeProvider>:

import { theme } from 'jaak-primitives'
import { ThemeProvider } from 'styled-components'

// Theme values can be customised - this is optional
const customTheme = {
  palette: {
    primary: '#AAAAAA',
  }
}

const Component = () => (
  <ThemeProvider theme={theme(customTheme)}>
    ...
  </ThemeProvider>
)