react-ui
A set of common components for react applications
Install
yarn add @salocreative/react-ui
Include the main SCSS sheet in your applications stylesheet
@import '~@salocreative/react-ui/src/scss/styles';
The styles use a variables sheet to set colours, default fonts, paddings etc. This is currently comented out in the package so you will need to copy @salocreative/react-ui/src/scss/variables.scss
into your project directly and modify the values as you need.
Basic Grid
Include the elements needed at the top of the component it's required in.
import { Column, Row, Card } from '@salocreative/react-ui';
Implement as follows
<Row>
<Column>
<Card>My first grid</Card>
</Column>
</Row>
Each of the grid components accepts a customClasses
prop to add your own classes to each element. This is used like this <Column customClasses='my-custom-card-class'></Column>
Buttons
A set of basic material design style buttons
Action button
Rounded material desig action button
import { ActionButton } from '@salocreative/react-ui';
there are two different use cases for the action button. One is using it as a standard link and the other is to use iot as a button with a custom JS action. Examples for each are given below. Note button only supports icons from FontAwesome and no text.
Implement a standard link as follows
<ActionButton
customClasses='my-custom-class'
icon='fontawesome-key',
link='/my-custom/link/here'
/>
Implement a button with custom action as follows
<ActionButton
customClasses='my-custom-class'
icon='fontawesome-key',
type='button'
buttonPressed={ (e) => this.doSomething(e) }
/>
There are also a couple of baked in modifier classes for the action button in the package that will update the button style when passed in on the customClasses
prop.
-
fixed
: this will fix the button in the bottom left corner of the screen and increase the diameter to 56px -
no-back
: removes the background colour of the button
Switch
Action toggle switches (On/Off)
import { Switch } from '@salocreative/react-ui';
The switch takes it current state from the parent and then emits an event on toggle where we can run a function from the parent based on our use case.
<Switch
label='Online'
labelOff='Offline'
state={ this.state.switchToggle }
switch={ (e) => this.toggleSwitchUpdate(e) }
/>
note the label on and off props. If no labelOff
is provided the label will default to the standard label
prop value.
Fixed menu
import { FixedMenu } from '@salocreative/react-ui';
implement as follows
<FixedMenu icon='plus'>
<a className='fixed-action__item'>
<FontAwesome name='sitemap' /> Add Category
</a>
<a className='fixed-action__item'>
<FontAwesome name='tag' /> Add Tag
</a>
<a className='fixed-action__item'>
<FontAwesome name='arrows-h' /> Add Dimension
</a>
<Link to={ routeCodes.PRODUCT.ADD } className='fixed-action__item btn'>
<FontAwesome name='plus' /> Add Product
</Link>
</FixedMenu>
The only prop required for the fixed menu is icon
. As per other components this only supports strings available within FontAwesome.
TypeAhead
import { TypeAhead } from '@salocreative/react-ui';
implement as follows
<TypeAhead
items={ productTags.data }
placeholder='Helper text'
selectedItem={ (id) => this.addTag(id) }
/>
the typeahead takes the following props:
-
items
: this needs to be array of objects with the basic structure that contains a title and id key. THe title is what will be rendered and the id is what will be on slection -
selectedItem
: this is the return function from the typeahead that is used by the application to process the selected item action -
placeholder
: string that sets the helper text for the component -
customClasses
: string of any custom classes you need -
data
: this is an object that can be used to assign what keys the typeahead will look for in the provided data for filtering and assignment. This need to contain an id and a title key.
Tag
A custom component to display tags of authors, tags, categories etc.
import { Tag } from '@salocreative/react-ui';
<Tag
customClasses='custom-tag-class'
title={ tag.title }
id={ tag.id }
removeTag={ (id) => this.removeTag(id) }
/>
The tag accepts the following props:
-
customClasses
: Optional string to add your own classes -
id
: required number field to uniquely identify a tag -
title
: required string for the tag display text -
removeTag
: optional function that can be used to remove a given tag (don't supply to make read only)
Modal
import { Modal } from '@salocreative/react-ui';
implement as follows
<Modal
isOpen={ this.props.open }
onClose={ () => this.closeModal() }
customClasses='large'
title='Modal title'
footer='Modal footer content' >
My modal content goes here
</Modal>
The Modal is display is controlled from the parent component so the state to hide or show the modal needs tp be explicitly set. With this in mind the Modal needs/accepts the following props:
-
isOpen
: boolean value of whether the modal should display or not. -
onClose
: this is a function that will be called when the modal fires a close event. -
title
: string to set the modals title -
subtitle
: string to set the modals sub-title -
footer
: accepts JSX to set the content of the modal footer -
customClasses
: set custom classes on the modal
Modal size currently there are some default sizes configured for the modal window. These can be set by passing the correct class via the customClasses
prop (yuou can create your own of course)
-
small
- 500px - default (no class needed) - 900px
-
large
- 1400px -
x-large
- 100% width
Loader
import { Loader } from '@salocreative/react-ui';
implement as follows
<Loader display={ this.props.loading } />
The Loader display is controlled from the parent component so the state to hide or show the loader needs tp be explicitly set. With this in mind the Loader needs/accepts the following props:
-
display
: boolean value of whether the modal should display or not (default is hidden). -
style
: currently the default style is a spinner but a string ofinline
can be passed to get a 3 dot inline loader instead
LICENSE
MIT