React UI/UX components by Clay Solutions B.V.
This project has the aim to reach a certain amount of re-usable react components that meet the development needs of common web apps.
This npm module is made for reusable UI/UX components used in Clay Solutions development process. Every component is made to use bootstrap principles and classes for easter setup and usage.
Installation
React UI/UX components are available as an npm package.
npm install com.my-clay.react.ui --save
Info
Current release: 0.8.0
Repo: https://bitbucket.org/claysolutions/ui-ux
Project Dependencies:
- react
- babel-register
- classnames
List of available components (Component, from Version)
- Img: 0.5.0
- Loading: 0.5.3
- Input: 0.4.6
- Dropdown: 0.5.2
- Validation: 0.4
- Button: 0.5.10
1. Input
Usage
; <Input/> <Input type='email' className=`form-control ` placeholder='The placeholder for email' validate=validationFunction disabled=false onChange=handlerForOnChange/>
This component renders
<div className='form-input'> <input name=inputName type=inputType validateOnKeyUp=true | false className=inputClasses + validationClasses placeholder=inputPlaceholder onChange=propForHandleChange onBlur=propForHandleBlur onFocus=propForHandleFocus onKeyUp=propForHandleKeyUp disabled=inputDisabled /> <label className='validation-label'> returnOfValidationFunctionmessage || 'This is not valid' </label></div>
2. Validation
Usage *(you can use custom validation with inputs just maintain the same object structure)
; Validation/* returns validation object { valid: true, message: undefined}*/ Validation/* returns validation object { valid: false, message: 'Invalid email address'}*/ Validation/* returns validation object { valid: false, message: 'Password is to short'}*/ Validation/* returns validation object { valid: false, message: 'Cannot be empty'}*/ Validation/* returns validation object { valid: false, message: 'Custom error message'}*/
3. Img
Usage The Img component renders an html element and runs checks in order to find at the same path of the given src a retina image with the same name plus the retina suffix. The component checks if the current screen is retina and if there is a retina image available before changing the src of the img html element.
; <Img src='/assets/logo.png' className='example-class' alt='Logo' title='Logo' retinaImageSuffix='@2x' // same as default noRetina=true/false onLoad=handlerForOnLoad onError=handlerForOnError/>
This component renders
<img class="example-class" src="/assets/logo.png" alt="Logo" title="Logo" height="28" width="127" /> **For retina dispay<img class="example-class" src="/assets/logo@2x.png" alt="Logo" title="Logo" height="28" width="127" />
4. Loading Component
Usage The Loading component wraps a single Html element that will be shown if the IsLoading property is false, otherwise it will show a spinner if passed trough the spinner prop or a text that by default is 'Loading..' if no loadingText is passed.
;;<Loading isLoading=true/false spinner=ExampleSpinner> <p>Content showing</p></Loading>
5. Dropdown Component
Usage The dropdown has multiple sub components such as DropDownTrigger, DropDownMenu.
They both accept multiple child elements. DropDownTrigger elements will be wrapped in an tag responsble for the toggling open/close of the dropdown.
DropDownMenu elements will holds the actual content of the dropdown.
; <DropDown className='profile-info'> <DropDownTrigger> <img width='44' className='img-circle-avatar' src='image.jpg' /> John Henderson <span className='caret' /> </DropDownTrigger> <DropDownMenu> <div> Menu content </div> </DropDownMenu></DropDown>
6. Button
Usage This component renders button element that has a capability of a pending/loading state.
The loading element can be passed to the component by the loader prop, and to add it into the button you need to set the loading prop to true.
; <Button className='btn-success' onClick=handleOnClick type='button | submit | ...' disabled=true | false loading=true | false success=true | false loader='loading string' | <element></element>> Text of the button | <element></element></Button>
<button class="btn btn-success loading" type="submit"> <element>//loading element</element> <span>Text of the button </span></button>
7. Checkbox
Usage
; <Checkbox /> <Checkbox className=`checkbox-label-class` checked=isChecked onChange=callBackOnChange> Label text<Checkbox />
This component renders
<label class="checkbox-label-class"> <input type="checkbox" /> Label text</label>
made with ❤️ by a bunch of Bricks