Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nicoaudy/cidro-ui
https://github.com/nicoaudy/cidro-ui
Last synced: about 6 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/nicoaudy/cidro-ui
- Owner: nicoaudy
- Created: 2019-08-05T08:51:54.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-10-22T08:12:04.000Z (about 5 years ago)
- Last Synced: 2024-10-08T11:11:20.122Z (3 months ago)
- Language: JavaScript
- Size: 61.5 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# CIDRO UI - React Native UI Library 🔥
[](https://www.npmjs.com/package/cidro)
**Install**
📚[Documentation](https://serene-goldstine-9f6be6.netlify.com/)
```
$ npm install cidro
```
# Available Components
## Block
**Usage**
```javascript
import { Block, Text } from "cidro";
const App = () => (
CIDRO 🔥
);
```
**Available Props**
| Property | Type | Default | Description |
| -------- | :----------: | :------: | ------------------------------------------------ |
| row | bool | false | flexDirection: 'row' |
| column | bool | false | flexDirection: 'column' |
| flex | bool, number | false, 1 | flex: 1 or |
| safe | bool | false | Wrap the block with SafeAreaView |
| center | bool | false | alignItems: 'center' alignSelf: 'center' |
| middle | bool | false | alignItems: 'center' alignSelf: 'center' |
| top | bool | false | alignItems: 'flex-start' alignSelf: 'flex-start' |
| bottom | bool | false | alignItems: 'flex-end' alignSelf: 'flex-end' |
| left | bool | false | alignItems: 'flex-start' |
| right | bool | false | alignItems: 'flex-start' |
| card | bool | false | changes the border-radius, -width and -color |
| fluid | bool | false | width: 'auto' |
| height | number | null | changes the height of the Block |
| space | string | null | options are: 'between', 'around' or 'evently' |
| width | number | null | changes the width of the Block |
---
## Toolbar
**Usage**
```javascript
import { Toolbar, Text } from "cidro";
const App = () => (
Back}
leftHandler={() => alert("left handler")}
center={CIDRO UI 🔥}
right={Logout}
rightHandler={() => alert("right handler")}
);
```
**Available Props**
| Property | Type | Default | Description |
| ------------ | :-------: | :------: | ----------------------------------------------------------------------------- |
| color | string | null | change color |
| noShadow | boolean | false | Toolbar without shadow |
| height | number | 52 | change height |
| left | component | null | set your own component (eg: Text or Icon) |
| leftHandler | function | () => {} | Take an arrow function and everytime the user presses the function is called. |
| center | component | null | set your own component |
| right | component | null | set your own component |
| rightHandler | function | () => {} | Take an arrow function and everytime the user presses the function is called. |
| style | style | null | add any style to the whole container |
---
## Button
**Usage**
```javascript
import { Button } from "cidro";
const App = () => ;
```
**Available Props**
| Property | Type | Default | Description |
| -------- | :----: | :-----: | -------------------------------------------------------- |
| text | string | null | Title is required |
| disabled | bool | false | Change the disabled button |
| loading | bool | false | Show loading indicator |
| size | number | 10 | Change the size button |
| width | string | null | Change the width |
| outline | bool | false | Change button style |
| type | string | primary | Available type "primary", "success", "danger", "warning" |
---
## Text
**Usage**
```javascript
import { Text } from "cidro";
const App = () => CIDRO UI 🔥;
```
**Available Props**
| Property | Type | Default | Description |
| -------- | :----: | :-----: | --------------------------------- |
| h1 | bool | false | Sets the text's fontSize to 44px. |
| h2 | bool | false | Sets the text's fontSize to 38px. |
| h3 | bool | false | Sets the text's fontSize to 30px. |
| h4 | bool | false | Sets the text's fontSize to 24px. |
| h5 | bool | false | Sets the text's fontSize to 18px. |
| p | bool | false | Sets the text's fontSize to 16px. |
| size | number | 0 | Sets the fontSize of the text. |
| color | string | null | Sets the color of the text. |
| muted | bool | false | Changes the text color |
| bold | bool | false | Sets the fontWeight to 'bold'. |
| italic | bool | false | Sets the fontStyle to 'italic'. |
---
## Form
**Usage**
```javascript
import { Form } from "cidro";
const App = () => (
);
```
**Available Props**
| Property | Type | Default | Description |
| -------- | :----------: | :---------: | ---------------------- |
| children | component | null | set your own component |
| title | bool, string | false, null | set your title |
| subtitle | bool, string | false, null | set your subtitle |
---
## Input
**Usage**
```javascript
import { TextInput } from "cidro";
const App = () => (
alert("Text On Change")}
/>
);
```
**Available Props**
| Property | Type | Default | Description |
| -------- | :----: | :-----: | ---------------------------------------------------- |
| label | string | null | set your label |
| message | string | null | set your message (eg: "Whops your email is invalid") |
| type | string | null | Available type "success", "error" |
---
## Avatar
**Usage**
```javascript
import { Avatar } from "cidro";
const App = () => (
);
```
**Available Props**
| Property | Type | Default | Description |
| -------- | :-----: | :-----: | --------------------------------------------------------- |
| size | number | 60 | set size |
| source | any | null | set image source, can be static from your app or external |
| circle | boolean | false | set border radius / 2 if set true |
| style | style | null | add any style to the whole container |
---
## Avatar Text
**Usage**
```javascript
import { AvatarText } from "cidro";
const App = () => ;
```
**Available Props**
| Property | Type | Default | Description |
| --------------- | :-----: | :-----: | ------------------------------------ |
| title | string | null | set title for initials |
| size | number | 60 | set size |
| backgroundColor | string | black | set background color |
| textColor | string | white | set text title color |
| circle | boolean | false | set border radius / 2 if set true |
| style | style | null | add any style to the whole container |
## Support
