1.2.1 • Published 2 years ago

@lifeomic/prim v1.2.1

Weekly downloads
682
License
MIT
Repository
github
Last release
2 years ago

react-native-prim

Prim is a customizable TypeScript atomic styles framework for React Native.

Basics

In the root component of your screen or app:

import { PrimProvider, usePrim } from '@lifeomic/prim'

const App: React.FC = () => (
  <PrimProvider>
    <RootAppNavigation />
  </PrimProvider>
)

In your primmly dressed components:

const Title = primmed(Text, prim => [
  prim.text.xxl,
  prim.text.color.gray900,
  prim.font.bold,
])

const Body = primmed(Text, prim => [
  prim.text.base,
  prim.text.color.gray900,
  prim.font.medium,
])

const Caption = primmed(Text, prim => [
  prim.text.sm,
  prim.text.color.gray600,
  prim.font.medium,
  prim.text.capitalize,
])

const ArticleCard: React.FC<{ article: Article }> = ({ article }) => {
  const prim = usePrim()
  return (
    <View style={[
      prim.p[4],
      prim.border[1],
      prim.border.gray100,
      prim.rounded.lg,
      prim.overflow.hidden,
    ]}>
      <Caption>article.formattedDate</Title>
      <Title style={prim.mt[2]}>
        {article.title}
      </Title>
      <Body style={prim.mt[2]}>
        {article.body}
      </Title>
    </View>
  )
}

Acknowledgements

Prim was inspired by tailwindcss. Much of it's API as well as some of it's default theme will be familiar to tailwind users.

tailwingcsstailwindreact-nativereacttypescript
@everything-registry/sub-chunk-547@infinitebrahmanuniverse/nolb-_lif@zalastax/nolb-_lif
1.2.2-pr-43-1698943515-1642183280.0

2 years ago

1.2.2-pr-42-1698574784-1642177193.0

2 years ago

1.2.2-pr-38-936574993-1623690747.0

3 years ago

1.2.1

3 years ago

1.2.2-pr-30-808288853-1620081270.0

3 years ago

1.2.1-pr-29-786101150-1619451411.0

3 years ago

1.2.1-pr-28-775868285-1619131334.0

3 years ago

1.2.1-pr-29-786759323-1619466158.0

3 years ago

1.2.1-pr-29-786657948-1619463746.0

3 years ago

1.2.1-pr-28-778908749-1619209427.0

3 years ago

1.2.1-pr-27-713000698-1617404474.0

3 years ago

1.2.0

3 years ago

1.1.4-pr-25-651929946-1615746676.0

3 years ago

1.2.1-pr-26-655341330-1615836467.0

3 years ago

1.1.4-pr-25-651932554-1615746753.0

3 years ago

1.1.4-pr-24-633934798-1615245082.0

3 years ago

1.1.4-pr-24-633929480-1615244948.0

3 years ago

1.1.4-pr-23-619136773-1614811303.0

3 years ago

1.1.4-pr-23-619123473-1614810949.0

3 years ago

1.1.4-pr-22-438856887-1608668841.0

3 years ago

1.1.4-pr-21-426767280-1608158123.0

3 years ago

1.1.3

3 years ago

1.1.3-pr-21-426583967-1608151715.0

3 years ago

1.1.3-pr-21-426764802-1608158043.0

3 years ago

1.1.3-pr-20-422633906-1608017135.0

3 years ago

1.1.3-pr-21-424584251-1608081995.0

3 years ago

1.1.2

3 years ago

1.1.3-pr-20-424438795-1608076189.0

3 years ago

1.1.3-pr-20-424428007-1608075514.0

3 years ago

1.1.3-pr-20-424370596-1608073392.0

3 years ago

1.1.3-pr-20-421969460-1607988809.0

3 years ago

1.1.3-pr-20-421255118-1607964614.0

3 years ago

1.1.2-pr-17-416377633-1607724034.0

3 years ago

1.1.1-pr-18-416367333-1607723579.0

3 years ago

1.1.1-pr-18-416351287-1607722994.0

3 years ago

1.1.1-pr-18-416215131-1607717893.0

3 years ago

1.1.1-pr-18-414037837-1607636745.0

3 years ago

1.1.1

3 years ago

1.1.1-1

3 years ago

1.1.1-0

3 years ago

1.1.0

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago