React Developers components
- Box
- Fonts
- Accordion
- button
- Dropdown
- Input
- Image
- Table
const theme: ThemeTypes = {
palette: {
Blue: {
dark: {
5: '#F2F6FA'
},
},
};
shadows,
typography,
zIndex,
shape,
fontSizes,
};
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 |
const { Flex } = Components(theme)
const App = () => (
<Flex
justifyContent="center"
bgColor='Blue.dark.5'
// ...other propps if needed
>
This is a div
</Flex>
)
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% |
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>
)
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 |
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>
)
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;
`;
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}
/>
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}
/>
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",
},
]}
/>
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);
}}
/>
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}
/>
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"}
/>
- Dropdown search works with dropdown values
- Font components must not have children
- Added
- Tabs component
- Switch component
- Conditionally added
toUpperCase
from dropdown head
- Conditionally added
toUpperCase
fif the searchField
is set to true
- 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.
- Fixed label type for tab component. Changed the type from string to any
- Fixed active state for tab
- Fixed type issue
- Added
Modal
ref type
- Fixed table unique key on every render
- Fixed active state not showing
- Added reValidate props to switch for reValidating
- Added loaderSize props to button for controlling the loader icon size
- Updated Accordion data types from
[{
details: any;
head: any;
key: number;
}];
to
{
details: any;
head: any;
key: number;
}[];
- Added AccordionMultiType component
- Centered button loader on loading state
- Made input value either
string
or number
- Fixed modal ref issue
- Fixed Dropdown search position
- Added mobile view direction to modal.
Default:
down