devs-react-component-library
v10.6.5
Published
A react component library that provides flexible access to lots of react components
Downloads
54
Maintainers
Readme
React Developers components
Components
- Box
- Fonts
- Accordion
- button
- Dropdown
- Input
- Image
- Table
ThemeTypes
const theme: ThemeTypes = {
palette: {
Blue: {
dark: {
5: '#F2F6FA'
},
},
};
shadows,
typography,
zIndex,
shape,
fontSizes,
};
1. Flex, Grid, Container
Box
Props|Values|Default --|--|-- justifyContent|string|center| alignItems|"flex-start" , "flex-end" , "center" , "baseline" , "stretch"|center| alignContent | "flex-start" , "flex-end" , "center" , "space-between" , "space-around" , "stretch" | null width | string eg: 20px | 100% height | string eg: 20px | 100% textAlign | "left" , "right" , "center" , "justify" , "inherit" | center wrap(fle-wrap) | "nowrap" , "wrap" , "wrap-reverse" | wrap direction(flex-direction)| row, row-reverse, column, column-reverse | row margin | string. Eg: 20px | 0 pad(padding) | string | 0 bgColor(background-color) | string from theme | transparent
Usage
const { Flex } = Components(theme)
const App = () => (
<Flex
justifyContent="center"
bgColor='Blue.dark.5'
// ...other propps if needed
>
This is a div
</Flex>
)
Grid
Props|Values|Default --|--|-- columns(grid-template-columns) | string | 1fr rows(gird-template-rows) | string | auto gap(grid-gap) | string | 10px justifyContent|string|center| alignItems|"flex-start" , "flex-end" , "center" , "baseline" , "stretch"|center| width | | 100%
Usage
import { Components, ThemeTypes } from "devs-react-component-library"
const theme: ThemeTypes = {
// palette:
// shadows,
// typography,
// zIndex,
// shape,
// fontSizes,
};
const { Grid } = Components(theme)
const App = () => (
<Grid
row="1fr 1fr"
// ...other propps if needed
>
This is a div
</Grid>
)
Container
Props |Values|Default --|--|-- width | string eg: 20px | 100% height | string eg: 20px | 100% textAlign | "left" , "right" , "center" , "justify" , "inherit" | center margin | string. Eg: 20px | 0 pad(padding) | string | 0 bgColor(background-color) | string from theme | transparent
Usage
import { Components, ThemeTypes } from "devs-react-component-library"
const theme: ThemeTypes = {
palette: {
read: '#F2F6FA'
};
// shadows,
// typography,
// zIndex,
// shape,
// fontSizes,
};
const { Grid } = Components(theme)
const App = () => (
<Container
width="50px"
bgColor='read'
// ...other propps if needed
>
This is a div
</Container>
)
2. Fonts
This applies to all fonts
UAGES
const theme: ThemeTypes = {
const palette = {
white,
common: {
white,
transparent,
},
Black: {
default: "#062A54",
80: "#0B2F59",
},
}
// shadows,
typography: {
fontFamily: {
quicksand: "Quicksand-regular, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif",
quicksandLight: "Quicksand-light, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif",
},
fontWeight: {
300: 300,
400: 400,
500: 500,
600: 600,
700: 700,
normal: "normal",
},
lineHeight: {
96: "96px",
69: "69px",
},
}
// zIndex,
// shape,
fontSizes: {
40: "40px",
46: "46px",
64: "64px",
}
};
export const { Span} = Components(theme);
<Span
fontFamily='quicksand'
weight="700"
ineHeight="69"
size="64"
colour={"Black.default"}
center
>
Hello Wolrd
</Span>
Extend any font (typescript)
export const { Span, FontTypes} = Components(theme);
export const SeeAllSpan = styled(Span)<FontTypes>`
cursor: pointer;
`;
3. Accordion
Props|Values|Default
--|--|--
gap|string|5px|
accordions | array of object | none
visible | number | none
setVisible | React.Dispatch<React.SetStateAction<number>>
| none
USAGE
export const { Accordion} = Components(theme);
const [ visible, setVisible] = useState(-1);
const accordions = [
{
head: "Lorem ipsum dolo",
details: "Lorem ips id."
},
{
head: "Lorem ipsum dolor sit amet, consectetur adipisc",
details: "Lorem ipsum dolor sit "
},
];
<Accordion
gap='20px'
accordions={accordions.map((accordion, key) => (
{
head: <div>Head</div>,
details: <div>Body of the accordion</div>,
key
}
))}
visible={visible}
setVisible={setVisible}
/>
4. Button
Props|Values|Default|Required
--|--|--|--
size|string from theme |none|tre
nonActiveColor | string from theme | none | true
activeColor | string from theme | none | true
nonActiveBgColor | string from theme | none | true
nonActiveBorderColor | string from theme | none | true
activeBgColor | string from theme | none | true
activeBorderColor | string from theme | none | true
text | string from theme | none | true
borderRadius | string from theme | none | true
pad | string from theme | none | true
isLoading | boolean | none | false
disabled | boolean | none | false
onClick | function | none | false
export const { Button} = Components(theme);
<Button
size='14'//from theme
nonActiveColor="Black.20"//from theme
activeColor="Black.default"//from theme
nonActiveBgColor={"common.transparent"}//from theme
nonActiveBorderColor={"Black.5"}//from theme
activeBgColor="common.transparent"//from theme
activeBorderColor="common.transparent"//from theme
text="Don't show again"
borderRadius="8"//from theme
pad={"padding.0"}//from theme
isLoading={false}
onClick={() => []}
disabled={false}
/>
5. Dropdown
Props|Values|Default|Required
--|--|--|--
weight|string from theme |none|true
direction|end
or start
|none|true
colour| string from theme |none|true
dropColor| string from theme from theme |none|true
dropHovColor| string from theme from theme |none|true
hovBgColor| string from theme |none|true
searchField| boolean |false|false
clearSelected| boolean |false|false
placeholder| string |false|false
handleSelect| function |none|true
initial| string |undefined
|false
searchField| boolean |true
|false
type| "showmore" or undefined
|false
|false
data| array of object|none |true
USAGE
DropdownType for
data: {
returnedValue: any;
displayedValue: any;
dropdownValue: any
}[];
handleSelect: (returnedValue: any, selectedvalue: any, dropdownValue: any) => void;
export const { Dropdown} = Components(theme);
<Dropdown
weight="300"
direction="end"
colour="Black.default"
dropColor="Black.80"
dropHovColor="Black.default"
hovBgColor="Black.20"
searchField={false}
handleSelect={(selected) => console.log(selected)}
data={[
{
dropdownValue: "All",
displayedValue: "All",
returnedValue: "All"
},
{
dropdownValue: "Best",
displayedValue: "Best",
returnedValue: "Best",
},
]}
/>
6. Input
Props|Values|Default|Required
--|--|--|--
handleChange|function|none|true
name|string|none|true
value|string or number|none|true
disabled| boolean |false|false
iconAfterInput| Element |none|false
iconBeforeInput| Element |none|false
handleOnFocus| function |none|false
handleOnBlur| function |none|false
handleOnEmptyInputValue| function |none|false
placeholder| string |none|false
bgCol| string from theme |transparent
|false
borderRadius| string from theme |transparent
|false
export const { Input} = Components(theme);
<Input
name={name}
type={type}
value={value}
onChange={(e) =>{
setChecked(e.target.value);
handleOnChange && handleOnChange(e.target.value);
}}
/>
7. Image
Props|Values|Default|Required
--|--|--|--
src|string|none|true
alt|string|""|false
height|string|100%|false
width|string|100%|false
loading|boolean|false|false
error|boolean|false|false
radius|string|0
|false
loader|Element|none|false
fallBackImage|string|none|false
object| 'fill' od 'contain' od 'cover' od "none" od "scale-down"|cover
|false
USAGE
export const { Input} = Components(theme);
<Image
loader={<div>Loading ...</div>}
width={"48px"}
height={"48px"}
src={state?.profile?.basic?.studentProfileImage?.imageUrl}
/>
8. Table
Props|Values|Default|Required
--|--|--|--
headColor|string from theme |none|true
headBgColor|string from theme |none|true
bodyColor|string from theme |none|true
tableBodys| array of object(of any key)|none|true
tableHead| array of string |none|true
handleRowClick| function |none|false
export const { Table, } = Components(theme);
<Table
tableBodys={[
{
type: timeline?.event,
amount: "Todays's daye",
frequency:<span>Frequesncy</span>
}
]}
tableHead={["EVENT", "DATE/MONTH", "STATUS"]}
handleRowClick={(e) => console.log(e)}
headColor={"Black.default"}
headBgColor={"transparent.default"}
bodyColor={"Black.80"}
/>
VERSIONING
Version|Update|Default|Component
--|--|--|--
6.0.3 | Dropdown search works with dropdown values | | |
6.0.5 | Added Tabs component Switch component | | |
6.0.6 | Conditionally added toUpperCase
from dropdown head | | |
9.0.0 | Conditionally added toUpperCase
fif the searchField
is set to true | | |
9.1.0 | Tab compoentn can now take - JS Element
as tabs name - Children is no longer allowed, rather array of object containing head and body is expected. | | |
9.1.1 | Fixed label type for tab component. Changed the type from string to any| | |
| | | |
10.5.1 | Added click event to specified table body data head | | |
10.6.1 | To the handleRowTabClick handler, added the active row clicked | | |
10.6.2 | Initial props now set to any, not just string | | |
10.6.3 | Initial propsType on Dropdown now set to any, not just string | string | Dropdown |
10.6.4 | Assigned class names to modal elements | | Modal |
10.6.5 | Assigned class names to modal elements | | Modal |
Verision 9.1.2
- Fixed active state for tab
Verision 9.1.5
- Fixed type issue
Verision 9.1.10
- Added
Modal
ref type
Verision 9.1.12
- Fixed table unique key on every render
Verision 9.1.13
Fixed active state not showing
Verision 9.1.16
Added reValidate props to switch for reValidating
Verision 9.1.17
Added loaderSize props to button for controlling the loader icon size
Verision 9.1.19
- Updated Accordion data types from
[{
details: any;
head: any;
key: number;
}];
to
{
details: any;
head: any;
key: number;
}[];
Verision 10.0.0
- Added AccordionMultiType component
Verision 10.0.1
- Centered button loader on loading state
Verision 10.0.2
- Made input value either
string
ornumber
Verision 10.0.11
- Fixed modal ref issue
Verision 10.0.14
- Fixed Dropdown search position
Verision 10.1.0
Added mobile view direction to modal. Default:
down