https://github.com/itsaladin/cherag-ui
React Native UI Library NPM Package
https://github.com/itsaladin/cherag-ui
cherag-ui react-native react-native-cherag-ui react-native-ui-lib
Last synced: about 1 month ago
JSON representation
React Native UI Library NPM Package
- Host: GitHub
- URL: https://github.com/itsaladin/cherag-ui
- Owner: itsaladin
- License: mit
- Created: 2022-07-26T13:33:17.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-09-11T18:59:28.000Z (over 2 years ago)
- Last Synced: 2025-02-23T06:29:18.974Z (over 1 year ago)
- Topics: cherag-ui, react-native, react-native-cherag-ui, react-native-ui-lib
- Language: TypeScript
- Homepage: https://aladdinstudios.github.io/cherag/ui
- Size: 1.01 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Cherag-UI
🔥 An easy to use ui library for React Native 🔥
## Installation
Install with your favorite package manager.
Using Yarn:
```
yarn add cherag-ui
```
Using NPM:
```
npm i cherag-ui
```
### Install Peer Dependencies
Cherag UI uses `reaact-native-vector-icons` for icons. You must install it and configure it for your project. See its [documentation](https://github.com/oblador/react-native-vector-icons#installation) for more information about setting it up for Android, IOS or Web.
Follow Native Web's [documentation](https://necolas.github.io/react-native-web/docs/) to use Cherag UI on Web.
## Usage
Now import and use various components from the Cherag-UI library.
```tsx
// App.tsx
import React, { useState } from 'react';
import {
Checkbox,
CheckboxItem,
CheckboxValue,
COLORS,
Div,
RadioButton,
RadioButtonItem,
RadioButtonValue,
} from 'cherag-ui';
import { StyleSheet } from 'react-native';
export default function App() {
const [checkboxes, setCheckboxes] = useState([]);
const [selectedRadio, setSelectedRadio] = useState(1);
return (
Radio button
Radio button
Checkbox item 1
Checkbox item 2
Checkbox item 3
);
}
const styles = StyleSheet.create({
container: {
width: '100%',
height: '100%',
marginTop: 30,
},
radioBtnGroup: {
flexDirection: 'row',
},
checkboxText: {
fontSize: 16,
},
});
```
## Documentation
For more examples and usages, see [our documentation](https://aladdinstudios.github.io/cherag/)
## Development
This project integrates with `react-native-builder-bob`. To get started:
1. Fork and Clone the repository.
2. Create your feature branch.
3. Install dependencies using `yarn`.
4. Run example project using `yarn example android`, `yarn example ios` or `yarn example web`.
5. Make your changes and create a PR!
6. Thank you.
## License
This package is licensed under the MIT License.
## Contribution
Any kind of contribution is welcome. Thanks!