connect-ui v1.1.0
Connect UI Library
This repository contains the essential files for building the Connect UI library. Connect UI library exports all the generic React Components used at various places on connect.trekhunt.com.
How to get started
Run npm install connect-ui
.
How to contribute
First you need to pull the repo, connect-ui. You can add/edit/delete components in the src/components
folder.
Don't forget to export the new component in the /src/index.js
file.
Components
List of the exported components:
- ConnectButton
- ConnectCheckbox
- ConnectDropDown
- ConnectTable
- ConnectTablePage
- ConnectTextInput
ConnectButton
<ConnectButton
text="Text to be displayed"
type="Type can be handler or link. Handler calls the handler function, link redirects to the given link"
link="example-link"
handler={()=>{}}
theme="default is primary"
/>
ConnectCheckbox
<ConnectCheckbox
isSelected="state of the checkbox, if it's selected or not"
onChange={()=>{}}
/>
ConnectDropDown
<ConnectDropDown
options={[{option: "opt", value: "val"}]}
icon="String to pick an icon to display. Right now from a predefined list"
placeholder="Placeholder text"
selected="Selected value from the dropdown"
onChange={()=>{}}
bold="If the displayed text is bold or not"
width="Width of the component"
/>
ConnectTable
<ConnectTable
withCheckboxes="True if you want to display checkboxes for every row"
globalActionButtons="List of the actionButtons to show next to the CheckBox"
selection="The list of the selected rows"
updateSelection={()=>{}}
headers="Array of header items"
items="Array of row items"
itemsPerPage="Number of items to show on one table page"
/>
ConnectTablePage
<ConnectTablePage
buttons="List of the buttons to show on the table page"
filters="List of the dropdown filters to show next to the button"
msg="Table pagination info"
withCheckboxes="True, if you want to display checkboxes for every row"
globalActionButtons="List of the actionButtons to show next to the CheckBox"
selection="The list of the selected rows"
updateSelection={()=>{}}
headers="Array of header items"
items="Array of row items"
itemsPerPage="Number of items to show on one table page"
itemCount="Number of items to show"
itemsFrom="For pagination, the start number of the row"
movePageTo="Function which handles the pagingation"
/>
ConnectTextInput
<ConnectTextInput
onChange={()=>{}}
value="State of the input"
characterCount="True, if you want to have character limitation"
maxCharacters="Number of characters to accept"
placeholder="PlaceHolder text"
number="If it's a numbers only inputform"
width="The width of the component"
onBlur="Function which is called when the input is invalid"
disabled="True, if the input is disabled"
readOnly="True, if the input is immutable"
min="Minimum number to accept"
max="Maximum number to accept"
icon="Icon string to display in the input. Right now only from predefined ones."
/>
Icons
The list of the available icons right now:
- Activity
- Delete
- DownArrow
- Edit
- Owner
- Search
- Status
- View
Directories
- src/components - the place where you should add your new components
- dist - where the minified file is built
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago