https://github.com/tmpfs/prism-primitives
React Native primitives for Prism
https://github.com/tmpfs/prism-primitives
components css primitives prism react reactnative ui
Last synced: about 2 months ago
JSON representation
React Native primitives for Prism
- Host: GitHub
- URL: https://github.com/tmpfs/prism-primitives
- Owner: tmpfs
- Created: 2018-01-31T02:18:50.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-05-16T05:33:19.000Z (over 6 years ago)
- Last Synced: 2025-02-05T15:43:54.536Z (8 months ago)
- Topics: components, css, primitives, prism, react, reactnative, ui
- Language: JavaScript
- Homepage:
- Size: 265 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Prism Primitives
React Native primitives for Prism
---
- [Installation](#installation)
- [Synopsis](#synopsis)
- [Getting Started](#getting-started)
- [Implementation](#implementation)
- [Notes](#notes)
- [License](#license)
---
## Installation
Use your preferred package manager for installation.
```
npm i --save react-native-prism-primitives
yarn add react-native-prism-primitives
```
## Synopsis
React Native primitives integrated with [Prism](https://github.com/tmpfs/prism) designed to reduce the cognitive load during migration or integration.
This library exposes all the React Native visual components wrapped using the `Prism()` function. Class names are identical so it is a drop-in replacement.
The API is considered locked and changes will only be made for bugs or if the underlying RN components being tracked change.
Bug fixes will be released under patch versions, new RN components under minor releases and major changes to the underlying RN components (deletions) will be tracked via major version releases.
## Getting Started
Configure your application (see the Prism [Getting Started](https://github.com/tmpfs/prism#getting-started) guide) and then you can import your visual components from `react-native-prism-primitives` to use the [Prism Properties](https://github.com/tmpfs/prism#properties) in your application.
```javascript
import {
Text,
View
} from 'react-native-prism-primitives'
```
You can now define default style declarations for the primitive components in your style sheet:
```javascript
export default {
styles: ({colors, fonts}) => {
return {
'Text': {
color: 'green'
},
'View': {
flex: 1
}
}
}
}
```
And use the style property shortcuts (assuming they are enabled):
```html
Example
```
## Implementation
The components are very thin wrappers around the RN components and do not add any extra functionality apart from that enabled by [Prism](https://github.com/tmpfs/prism).
```javascript
import React, {Component} from 'react'
import {Text as NativeText} from 'react-native'
import {Prism} from 'react-native-prism'
class Text extends Component {
static styleName = 'Text'
static propTypes = NativeText.propTypes
render () {
return (
{this.props.children}
)
}
}
export default Prism(Text)
```
## Notes
This library only exposes the *visual components*. API components (such as `Platform`) should still be imported directly from `react-native`.
## License
MIT
---
Created by [mkdoc](https://github.com/mkdoc/mkdoc) on June 18, 2018
[prism]: https://github.com/tmpfs/prism
[getting started]: https://github.com/tmpfs/prism#getting-started
[prism properties]: https://github.com/tmpfs/prism#properties