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

import { Input } from 'com.my-clay.react.ui';

<Input/>

<Input
  type='email'
  className={`form-control ${caseOne ? 'case-one-class' : 'case-two'}`}
  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'>
    {returnOfValidationFunction.message || 'This is not valid'}
  </label>
</div>

2. Validation

Usage *(you can use custom validation with inputs just maintain the same object structure)

import { Validation } from 'com.my-clay.react.ui';

Validation.validateEmail('[email protected]')
/* returns validation object {
  valid: true,
  message: undefined
}
*/

Validation.validateEmail('unValidInput')
/* returns validation object {
  valid: false,
  message: 'Invalid email address'
}
*/

Validation.validatePassword('short')
/* returns validation object {
  valid: false,
  message: 'Password is to short'
}
*/

Validation.validateNotEmpty('')
/* returns validation object {
  valid: false,
  message: 'Cannot be empty'
}
*/

Validation.validateNotEmpty('', 'Custom error message')
/* 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.

import { Img } from 'com.my-clay.react.ui';

<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/[email protected]" 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.

import { Loading } from 'com.my-clay.react.ui';
import { ExampleSpinner } from './ExampleSpinner';
<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.

import { Loading } from 'com.my-clay.react.ui';

<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.

import { Button } from 'com.my-clay.react.ui';

<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

import { Checkbox } from 'com.my-clay.react.ui';

<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 :heart: by a bunch of Bricks