Limit React Components
Library with multiple generic components for limit inc
Install
npm install --save @limit.es/limit-react-components
or
yarn add --@limit.es/limit-react-components
Usage
Tree View
...
import { TreeView } from "@limit.es/limit-react-components";
...
const mapStateToProps = (state) => {
return {
data: getFormattedData(state),
loading: getIsLoading(state),
expanded: getExpanded(state),
selectedNode: getSelectedNode(state),
};
};
const mapDispatchToProps = (dispatch) => {
const actions = {
reset: bindActionCreators(reset, dispatch),
selectNode: bindActionCreators(selectNode, dispatch),
expandNode: bindActionCreators(expandNode, dispatch),
selectAndExpandNode: bindActionCreators(selectAndExpandNode, dispatch),
};
return { actions };
};
const component = connect(mapStateToProps, mapDispatchToProps)(TreeView);
export default component;
Material DataGrid Pro
import { MaterialDataGridPro } from "@limit.es/limit-react-components";
const rows = [
{
id: "1",
codi: "1",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
rating: 1,
number: "120.100",
},
...
];
const columns = [
{ field: "codi", headerName: "Code", minWidth: 90, editable: true },
...
];
...
<MaterialDataGridPro
rows={rows}
columns={columns}
getRowId={(row) => row.id}
onCreate={() => {}}
onCellEditCommit={() => {}}
indexRow={"codi"}
disableEditandCreate={false}
disableInlineEdition={false}
/>;
...
Material Autocomplete
import { MaterialAutocomplete } from "@limit.es/limit-react-components";
const items = [
{
label: "Option 1",
value: "label1",
},
...
]
...
<MaterialAutocomplete
id="example"
label="Example autocomplete"
variant="filled"
loading={loading}
items={items}
onChange={handleChange}
onSearch={handleSearch}
groupBy={(option) => option.label}
size="small"
disabled={disabled}
forcedValue={{
label: value?.description,
value: value?.id,
}}
/>;
...
Material DataGrid
import { MaterialDataGrid } from "@limit.es/limit-react-components";
const rows = [
{ id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
...
];
const columns = [
{ field: 'id', headerName: 'ID', width: 70 },
{
field: "firstName",
headerName: "First Name",
align: "center",
headerAlign: "center",
editable: true
},
...
];
...
<MaterialDataGrid
id="example"
rows = {rows}
columns = {columns}
loading = {loading}
getRowId = {(row) => row.codi}
autoHeight = {true}
autoWidth = {true}
disableColumnMenu = {true}
disableExtendRowFullWidth = {true}
disableInlineEdition = {false}
flexGrid = {true}
checkboxSelection = {false}
onCellEditCommit = {() => {}}
onRowClick = {() => {}}
onRowDoubleClick = {() => {}}
onSelectionModelChange = {() => {}}
rowPerPage = {5}
/>;
...
License
MIT © juanmzaragoza