Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/panza-org/panza
react-native stateless functional UI components to get you up and running quickly
https://github.com/panza-org/panza
Last synced: 27 days ago
JSON representation
react-native stateless functional UI components to get you up and running quickly
- Host: GitHub
- URL: https://github.com/panza-org/panza
- Owner: panza-org
- Created: 2016-06-01T18:53:25.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T22:53:21.000Z (about 2 years ago)
- Last Synced: 2024-04-21T18:01:24.169Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 5.47 MB
- Stars: 257
- Watchers: 6
- Forks: 14
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-react-native - Panza ★243 - a collection of stateless, functional, cross-platform ui components for react-native. (Libraries / Other Platforms)
- awesome-react-native-ui - Panza ★155 - a collection of stateless, functional, cross-platform ui components for react-native (Libraries / Other Platforms)
- awesome-react-native - Panza ★243 - a collection of stateless, functional, cross-platform ui components for react-native. (Libraries / Other Platforms)
README
# panza
Panza is a collection of ui-components for react-native modelled after iOS.
This library is currently undergoing a rewrite and will be updated soon along with new documentation.
## Getting Started
```
$ npm i panza --save
$ npm i react-native-vector-icons --save
$ rnpm link react-native-vector-icons
```
## Components
### Inputs
* [InputRow](documentation/InputRow.md)
* [InputGroup](documentation/InputGroup.md)
* [InputHelpText](documentation/InputHelpText.md)
* [InputToggle](documentation/InputToggle.md)
* [InputPicker](documentation/InputPicker.md)
* [InputDatePicker](documentation/InputDatePicker.md)
* [RemovableInput](documentation/RemovableInput.md)
* [AddRow](documentation/AddRow.md)
* [TouchableInput](documentation/TouchableInput.md)
### Rows
* [TouchableRow](documentation/TouchableRow.md)
* [RowSeparator](documentation/RowSeparator.md)
* [RowImage](documentation/RowImage.md)
* [SectionHeader](documentation/SectionHeader.md)
### Navigation
* [NavBar](documentation/NavBar.md)
* [NavTitle](documentation/NavTitle.md)
* [NavTouchableIcon](documentation/NavTouchableIcon.md)
* [NavTouchableText](documentation/NavTouchableText.md)
* [SubNav](documentation/SubNav.md)
### Pages
* [ErrorPage](documentation/ErrorPage.md)
* [LoadingPage](documentation/LoadingPage.md)
### Buttons
* [Button](documentation/Button.md)
* [PrimaryButton](documentation/PrimaryButton.md)
* [WarningButton](documentation/WarningButton.md)
* [ErrorButton](documentation/ErrorButton.md)
* [SuccessButton](documentation/SuccessButton.md)
* [NakedButton](documentation/NakedButton.md)
* [VerticalButtonGroup](documentation/VerticalButtonGroup.md)
### Text
* [PrimaryText](documentation/PrimaryText.md)
* [SecondaryText](documentation/SecondaryText.md)
* [LargeText](documentation/LargeText.md)
* [SubtitleText](documentation/SubtitleText.md)
* [PrimaryTextInput](documentation/PrimaryTextInput.md)
* [SecondaryTextInput](documentation/SecondaryTextInput.md)
### Images
* [FadeImage](documentation/FadeImage.md)
### Icons
* [Icon](documentation/Icon.md)
* TouchableIcon
* PlusIcon
* ArrowRightIcon
* CloseIcon
* BackIcon
* SearchIcon
* MoreIcon
### Base Components
* [Base](documentation/Base.md)
* [TextBase](documentation/TextBase.md)
## Customize
You can override parts of the global configuration to provide custom colours, font sizes, scales, etc.
```javascript
import { config } from 'panza'
class App extends React.Component {
static childContextTypes = {
panza: PropTypes.object
}
getChildContext() {
panza: this.state.styles
}
state = {
styles: {
colors: Object.assign(
{},
config.colors,
{ primary: config.colors.red } // change the primary color from blue to red
)
}
}
// ... render your app
}
```
## Example
You can install the example application contained within this repository.
```
$ git clone https://github.com/bmcmahen/panza.git
$ cd panza && npm install
$ react-native run-ios
$ react-native run-android
```
## License
MIT