Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nextml-code/ui-components
React UI components
https://github.com/nextml-code/ui-components
Last synced: 1 day ago
JSON representation
React UI components
- Host: GitHub
- URL: https://github.com/nextml-code/ui-components
- Owner: nextml-code
- License: apache-2.0
- Created: 2020-09-01T10:46:36.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-10-21T12:40:07.000Z (about 3 years ago)
- Last Synced: 2025-01-04T15:01:31.248Z (11 days ago)
- Language: JavaScript
- Size: 1.48 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# UI Components
React ui component library.
- [UI Components](#ui-components)
- [Installation](#installation)
- [Peer Dependencies](#peer-dependencies)
- [Components](#components)
- [Select](#select)
- [Button](#button)
- [Checkbox](#checkbox)
- [Input](#input)
- [Label](#label)
- [File Input](#file-input)
- [File Dropzone](#file-dropzone)
- [File Upload](#file-upload)
## Installation
```
npm i @aiwizo/ui-components
```
### Peer Dependencies
```
npm i styled-component axios uuid @aiwizo/application-styles
```
## Components
### Select
```JavaScript
import "@aiwizo/application-styles";
import { Select } from '@aiwizo/ui-components';
{
return props.name;
}}
// callback triggered when an option
// is selected
onSelect={(option) => { /* Do something */ }}
// Set index of default value in the
// list of options (defaults to 0)
defaultIndex={2}
/>
```
### Button
```JavaScript
import "@aiwizo/application-styles";
import { Button } from '@aiwizo/ui-components';
```
### Checkbox
```JavaScript
import "@aiwizo/application-styles";
import { Checkbox } from '@aiwizo/ui-components';
{ /* Do something */ }}
// Value that is passed to the onChange
// callback
value="some value"
// Optional label displayed to the
// right of the checkbox
label="Lorem Ipsum"
/>
```
### Input
```JavaScript
import "@aiwizo/application-styles";
import { Input } from '@aiwizo/ui-components';
```
### Label
```JavaScript
import "@aiwizo/application-styles";
import { Label } from '@aiwizo/ui-components';
Lorem ipsum
```
### File Input
TODO
### File Dropzone
```javascript
import "@aiwizo/application-styles";
import { FileDropzone } from "@aiwizo/ui-components";
{
/* Do something */
}}
// Custom styling
styles={
backgroundColorDragging,
backgroundColor,
border,
borderTopLeftRadius,
borderTopRightRadius,
borderBottomRightRadius,
borderBottomLeftRadius,
color,
colorDragging,
fontFamily,
fontSize,
fontWeight,
padding,
}
/>
```
### File Upload
```javascript
import "@aiwizo/application-styles";
import { FileUpload } from "@aiwizo/ui-components";
{
// Do something with a file upload response or file
}}
// Amount of parallel file uploads.
// Defaults to 1.
requestBatchSize={1}
// Calls this function with the
// data returned from the upload request
// of a file
onRowClick={(fileResponseData) => {
// Do something with the data from the file upload response
}}
// Options for configuring the request made
// when posting the file to the specified url.
requestOptions={{
headers: {},
body: {
/* JSON */
},
}}
/>
```
**JSON**
Its possible to set request headers and body through the `requestOptions` parameter.
If a body is set the `content-type` header is set to `application/json` and the file will be converted to a base64 string and passed to the `body.file.data` field i.e.
```javascript
// Request body:
{
...requestOptions.body,
file: {
...requestOptions.body.file,
data: "data:image/jpeg;base64,/9j/4AAQSkZJRgABA...",
},
}
```
**form-data**
Set additional `multipart/form-data` entries through the `requestOptions.form` parameter.
The uploaded file will still be set as the entry `file`.
Example:
```javascript
requestionOptions={{
form: {
text: "text",
value: 3,
}
}}
```
Does not yet support nested `requestionOptions.form`.