jdesign
v1.61.0
React Styled Components
0/weekUpdated 3 years agoUnpacked: 5.0 MB
Published by Jordan Hury
npm install jdesignJDesign
======
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.
`javascript
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { createTheme, Theme } from 'jdesign';
const theme = createTheme(color1, color2, color3)
const app = (
);
ReactDOM.render(app, document.getElementById('root'));
`
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
$3
Usage:
`javascript
import React from 'react';
import { Button } from 'jdesign';
const MyComponent = () => (
onClick={() => console.log('clicked')}
label='button'
/>
)
`
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
$3
Usage:
javascript
import React from 'react';
import { PushedButton } from 'jdesign';const MyComponent = () => (
onClick={() => console.log('clicked')}
label='button'
/>
)
`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
$3
Usage:
javascript
import React from 'react';
import { IconButton} from 'jdesign';const MyComponent = () => (
style={{ background: 'radial-gradient(#FFEE58, #FFF176)', boxShadow: '0 0 2px 0 #303030', color: '#303030' }}
>
)
`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
$3
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
$3
Usage:
javascript
import React from 'react';
import { AddButton, TrashButton, EditButton, GoogleButton } from 'jdesign';const MyComponent = () => (
console.log('add button')} />
)
`Prop Name | Prop Type
----------|----------
All IconButton Props | *
All html button Props | *
svgStyle | Object
svgClassName | String
$3
Prop Name | Prop Type
----------|----------
All PushedIconButton Props | *
All html button Props | *
svgStyle | Object
svgClassName | String
Modal
$3
Usage:
javascript
import React from 'react';
import { Modal, Button } from 'jdesign'; class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
open: false
};
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
};
openModal() {
this.setState({ open: true });
};
closeModal() {
this.setState({ open: false });
};
render() {
return (
My Page
onClick={this.openModal}
/>
closeOnClickOutside={this.closeModal}
>
My Modal
content...
);
};
};
`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
$3
Usage:
javascript
import React from 'react';
import { TextInput } from 'jdesign'; class MyComponent extends React.Component {
state = {
text: ''
};
onType = (e) => {
const text = e.target.value;
this.setState({ text });
};
render() {
return (
);
};
};
`Prop Name | Prop Type
----------|----------
all html input props | *
$3
Usage:
javascript
import React from 'react';
import { FloatingTextInput } from 'jdesign'; class MyComponent extends React.Component {
state = {
text: ''
};
onType = (e) => {
const text = e.target.value;
this.setState({ text });
};
render() {
return (
value={this.state.text}
placeholder='EXAMPLE2'
error={this.state.text.length < 6}
errorMessage='must include at least 6 characters'
/>
);
};
};
`if you want to change the floating label color with a className you may have to add !important.
eg:
css
.floatingLabelClassExample {
color: red !important;
}
`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
$3
Usage:
javascript
import React from 'react';
import { TextArea } from 'jdesign'; class MyComponent extends React.Component {
state = {
text: ''
};
onType = (e) => {
const text = e.target.value;
this.setState({ text });
};
render() {
return (
);
};
};
`Prop Name | Prop Type
----------|----------
all html textarea props | *
$3
Usage:
javascript
import React from 'react';
import { FloatingTextArea } from 'jdesign'; class MyComponent extends React.Component {
state = {
text: ''
};
onType = (e) => {
const text = e.target.value;
this.setState({ text });
};
render() {
return (
);
};
};
`Prop Name | Prop Type
----------|----------
all html textare props | *
all FloatingTextInput props | *
Radio
Usage:
javascript
import React from 'react';
import { Radio } from 'jdesign'; class MyComponent extends React.Component {
state = {
value: undefined
};
onCheck = (e) => {
this.setState({ value: e.target.value });
};
render() {
return (
);
};
};
`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:
javascript
import React from 'react';
import { Checkbox } from 'jdesign'; class MyComponent extends React.Component {
state = {
checked: false
};
onCheck = (e) => {
this.setState({ checked: e.target.checked });
};
render() {
return (
);
};
};
`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:
javascript
import React from 'react';
import { Switch } from 'jdesign'; class MyComponent extends React.Component {
state = {
checked: false
};
onCheck = (e) => {
this.setState({ checked: e.target.checked });
};
render() {
return (
);
};
};
`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
$3
Usage:
javascript
import React from 'react';
import { Select, Option } from 'jdesign'; class MyComponent extends React.Component {
state = {
selected: null
};
onSelect = ({ text, value }) => {
this.setState({ selected: value });
};
render() {
return (
);
};
};
``Prop Name | Prop Type
----------|----------
defaultValue | String
form | String
disabled | Boolean
className | String
style | Object
selectedClassName | String
selectedStyle | Object
selectedBackground | String
optionsClassName | String
optionsStyle | Object
$3
Prop Name | Prop Type
----------|----------
all Select props | *
floatingLabelClassName | String
floatingLabelStyle | Object
floatingFocusedLabelClassName | String
floatingFocusedLabelStyle | Object
$3
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.