JDesign
Jordan Design - React components styled with css
JDesign is a set of React components styled with CSS3.
Github repository: https://github.com/Jordanh1996/JDesign
Components examples: https://jdesign.herokuapp.com/
NOTE: heroku apps after 30 minutes without traffic are idling, so loading may take up to 30 seconds.
Installation
You can install with npm :
$ npm install --save jdesign
and also with yarn :
$ yarn add jdesign
Usage
All of the usage examples are at the components descriptions below, there is an example for each component.
Customizing Colors (optional)
Jdesign can have a theme that works with react context to pass colors to the children of your app. After you use a theme the colors of ALL of Jdesign components will change accordingly. Context is used under the hood by react-redux, when you wrap a component with the connect function, and pass the correct arguments you could access the props you passed. In Jdesign you will not need to use the connect function on your components. you will only need to wrap your app with the Provider of the context, just like the provider with react-redux.
; ; ; ; const theme = const app = <Theme value=theme> // its ok if you are using react-redux and/or react-router <App /> // the wrapping order between react-redux and Theme does not matter </Theme> ; ReactDOM;
Available Components
Buttons
- Button
- PushedButton
- IconButton
- PushedIconButton
- AddButton
- EditButton
- TrashButton
- GoogleButton
- GooglePushedButton
Modal
- Modal
Text Inputs
- TextInput
- FloatingTextInput
Text Areas
- TextArea
- FloatingTextArea
Radio Buttons
- Radio
Check Boxes
- Checkbox
Switches
- Switch
Select
- Select
- FloatingSelect
- Option
Props
Buttons
Button
Usage:
;; const MyComponent = <div> <Button rounded onClick= console label='button' /> </div>
Prop Name | Prop Type |
---|---|
All html button Props | * |
label | String |
children | JSX |
rounded | Boolean |
ripple | Boolean |
rippleColor | String |
className | String |
style | Object |
containerClassName | String |
containerStyle | Object |
PushedButton
Usage:
;; const MyComponent = <div> <PushedButton rounded onClick= console label='button' /> </div>
Prop Name | Prop Type |
---|---|
All html button Props | * |
label | String |
children | JSX |
rounded | Boolean |
ripple | Boolean |
rippleColor | String |
className | String |
innerButtonClassName | String |
containerClassName | String |
containerStyle | Object |
IconButton
Usage:
;; const MyComponent = <div> <IconButton rounded style= background: 'radial-gradient(#FFEE58, #FFF176)' boxShadow: '0 0 2px 0 #303030' color: '#303030' > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10.99961 21.50922" style= width: '1.4rem' height: '1.4rem' fill: '#808080' > <path d="M10.57 9.1H6.2L10.3.6a.43.43 0 0 0-.72-.47L.1 11.3a.43.43 0 0 0 .33.72H4.4L.05 20.9a.43.43 0 0 0 .72.46L10.9 9.8a.43.43 0 0 0-.33-.7zm-8.3 9.24L5.5 11.8a.43.43 0 0 0-.4-.64H1.36L8.04 3.3 5.1 9.3a.43.43 0 0 0 .4.63h4.1z"/> </svg> </IconButton> </div>
To insert the icon/image you need to pass it as the children prop in JSX. In the Usage example you can see example of passing an html svg as the children. You can also insert a or anything you'd like.
Prop Name | Prop Type |
---|---|
All html button Props | * |
label | String |
labelStyle | Object |
labelClassName | String |
children | JSX |
rounded | Boolean |
ripple | Boolean |
rippleColor | String |
className | String |
style | Object |
containerClassName | String |
containerStyle | Object |
PushedIconButton
To insert the icon/image you need to pass it as the children prop in JSX. In the Usage example you can see example of passing an html svg as the children. You can also insert a or anything you'd like.
Prop Name | Prop Type |
---|---|
All html button Props | * |
label | String |
labelStyle | Object |
labelClassName | String |
children | JSX |
rounded | Boolean |
ripple | Boolean |
rippleColor | String |
className | String |
innerButtonStyle | Object |
innerButtonClassName | String |
containerClassName | String |
containerStyle | Object |
AddButton, TrashButton, EditButton, GoogleButton
Usage:
;; const MyComponent = <div> <AddButton onClick= console /> <Trashbutton disabled /> <EditButton ripple=false /> <GoogleButton /> </div>
Prop Name | Prop Type |
---|---|
All IconButton Props | * |
All html button Props | * |
svgStyle | Object |
svgClassName | String |
PushedGoogleButton
Prop Name | Prop Type |
---|---|
All PushedIconButton Props | * |
All html button Props | * |
svgStyle | Object |
svgClassName | String |
Modal
Modal
Usage:
; ; Component { superprops; thisstate = open: false ; thisopenModal = thisopenModal; thiscloseModal = thiscloseModal; }; { this; }; { this; }; { return <div> <h1>My Page</h1> <Button label='open modal' onClick=thisopenModal /> <Modal open=thisstateopen closeOnClickOutside=thiscloseModal > <h1>My Modal</h1> <div>content...</div> </Modal> </div> ; }; ;
Prop Name | Prop Type |
---|---|
open | Boolean |
closeOnClickOutside | Function |
overlayClassName | String |
overlayStyle | Object |
className | String |
style | Object |
closeOnClickOutside is used if you want to close the modal when clicking outside of its container. You need to pass it a function that will change the open prop given to the modal to false, like a state change.
Text Inputs
TextInput
Usage:
; ; Component state = text: '' ; { const text = etargetvalue; this; }; { return <div> <TextInput onChange=thisonType value=thisstatetext placeholder='EXAMPLE' /> </div> ; }; ;
Prop Name | Prop Type |
---|---|
all html input props | * |
FloatingTextInput
Usage:
; ; Component state = text: '' ; { const text = etargetvalue; this; }; { return <div> <FloatingTextInput onChange=thisonType value=thisstatetext placeholder='EXAMPLE' /> <FloatingTextInput onChange=thisonType value=thisstatetext placeholder='EXAMPLE2' error=thisstatetextlength < 6 errorMessage='must include at least 6 characters' /> </div> ; }; ;
if you want to change the floating label color with a className you may have to add !important. eg:
Prop Name | Prop Type |
---|---|
all html input props | * |
error | Boolean |
errorMessage | String |
floatingLabelClassName | String |
floatingLabelStyle | Object |
placeholderClassName | String |
placeholderStyle | Object |
inputClassName | String |
inputStyle | Object |
underlineClassName | String |
underlineStyle | Object |
underlineColor | String |
Text Areas
TextArea
Usage:
; ; Component state = text: '' ; { const text = etargetvalue; this; }; { return <div> <TextArea onChange=thisonType value=thisstatetext placeholder='EXAMPLE' rows=6 /> </div> ; }; ;
Prop Name | Prop Type |
---|---|
all html textarea props | * |
FloatingTextArea
Usage:
; ; Component state = text: '' ; { const text = etargetvalue; this; }; { return <div> <FloatingTextArea onChange=thisonType value=thisstatetext placeholder='EXAMPLE' rows=6 /> </div> ; }; ;
Prop Name | Prop Type |
---|---|
all html textare props | * |
all FloatingTextInput props | * |
Radio
Usage:
; ; Component state = value: undefined ; { this; }; { return <div> <Radio name="asd" onChange=thisonCheck vale='1' /> <Radio name="asd" onChange=thisonCheck value='2' color='red' /> <Radio name="asd" onChange=thisonCheck value='3' disabled /> </div> ; }; ;
The color prop changes the color of the ripple, border(when clicked), and the checked mark.
Prop Name | Prop Type |
---|---|
all html input radio props | * |
color | String |
Checkbox
Usage:
; ; Component state = checked: false ; { this; }; { return <div> <Checkbox onChange=thisonCheck defaultChecked /> <Checkbox disabled /> <Checkbox color='red' vColor='black' ripple /> </div> ; }; ;
The color prop changes the color of the ripple(if enabled), and background(when clicked). vColor prop changes the background of the v sign when clicked.
Prop Name | Prop Type |
---|---|
all html input checkbox props | * |
color | String |
ripple | Boolean(default is false) |
vColor | String |
Switch
Usage:
; ; Component state = checked: false ; { this; }; { return <div> <Switch onChange=thisonCheck defaultChecked /> <Switch disabled /> <Switch circleColor='red' railColor='pink' /> </div> ; }; ;
note: switch is technically an input type checkbox
Prop Name | Prop Type |
---|---|
all html input checkbox props | * |
color | String |
railColor | String |
circleColor | String |
Select Input
Select
Usage:
; ; Component state = selected: null ; { this; }; { return <div> <Select onChange=thisonSelect value=thisstateselected defaultValue='b'> <Option value='a'>1</Option> <Option value='b'>2</Option> <Option value='c'>3</Option> <Option value='d'>4</Option> </Select> </div> ; }; ;
Prop Name | Prop Type |
---|---|
defaultValue | String |
form | String |
disabled | Boolean |
className | String |
style | Object |
selectedClassName | String |
selectedStyle | Object |
selectedBackground | String |
optionsClassName | String |
optionsStyle | Object |
FloatingSelect
Prop Name | Prop Type |
---|---|
all Select props | * |
floatingLabelClassName | String |
floatingLabelStyle | Object |
floatingFocusedLabelClassName | String |
floatingFocusedLabelStyle | Object |
Option
Prop Name | Prop Type |
---|---|
selected | Boolean |
disabled | Boolean |
Suggestions, Help & Contact
email: jordanhuri96@gmail.com
I reply as quicky as I can, mostly less than a day.