https://github.com/lifeomic/react-native-prim
Prim is a customizable TypeScript atomic styles framework for React Native.
https://github.com/lifeomic/react-native-prim
team-mobile
Last synced: about 1 month ago
JSON representation
Prim is a customizable TypeScript atomic styles framework for React Native.
- Host: GitHub
- URL: https://github.com/lifeomic/react-native-prim
- Owner: lifeomic
- License: mit
- Created: 2020-10-05T15:45:34.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-09-12T14:02:36.000Z (9 months ago)
- Last Synced: 2024-10-31T19:51:49.667Z (7 months ago)
- Topics: team-mobile
- Language: TypeScript
- Size: 563 KB
- Stars: 5
- Watchers: 21
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-prim
Prim is a customizable TypeScript atomic styles framework for React Native.
### Basics
In the root component of your screen or app:
```TypeScript
import { PrimProvider, usePrim } from '@lifeomic/prim'
const App: React.FC = () => (
)
```
In your primmly dressed components:
```TypeScript
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 (
article.formattedDate
{article.title}
{article.body}
)
}
```
### Acknowledgements
Prim was inspired by [tailwindcss](https://tailwindcss.com). Much of it's API
as well as some of it's default theme will be familiar to tailwind users.