tec-web-base v0.1.73

Tec Web Base

Welcome to the comprehensive documentation for our tec-web-base npm package, a dynamic foundation meticulously built on React.js, integrating essential components and best practices for seamless and efficient software development. This robust starting point encapsulates a wealth of features, including custom hooks for HTTP services and sessions, Material-UI for component design. Whether you are a seasoned developer or just starting, this documentation provides a roadmap to leverage the rich functionalities and ensure a smooth development journey.

Getting Started

Install npm package tec-web-base in your project through this command:

npm i tec-web-base

Components

Our package comes equipped with a versatile set of components, carefully selected to enhance your development experience. Each component is designed to seamlessly integrate with your projects, providing consistent styling and behavior. Let's explore the main components included in our package:

• Backdrop
• Button
• Checkbox
• Dialog
• FileUpload
• Form
• Multistep Form
• Radio
• Select
• Snackbar
• Table
• Textfield
• TransferList

Backdrop

The Backdrop component narrows the user's focus to a particular element on the screen.

import {Backdrop} from 'tec-web-base';

<Backdrop loading={loading}/>

Props

Note: You can further enhance the functionality by including the additional props available for the MUI Backdrop component... Read More

Button

The Button component allows users to take actions and make choices with a single tap.

import {Button} from 'tec-web-base';

<Button
    variant="contained"
    title="Title"
    startIcon={<AddIcon/>}
    onClick={() => {
    }}
/>

Props

Note: You can further enhance the functionality by including the additional props available for the MUI Button component... Read More

Checkbox

The Checkboxes allow the user to select one or more items from a set.

import {CheckBox} from 'tec-web-base';

<CheckBox
    name="jobType"
    label="Job Type"
    value={['full-time', 'contract']}
    options={[
        {id: 'full-time', label: 'Full Time', checked: false},
        {id: 'part-time', label: 'Part Time', checked: false},
        {id: 'contract', label: 'Contract', checked: false}
    ]}
    onChangeHandler={(event, selectedValues) => {
        console.log('job type', event.target.value, selectedValues)
    }}
    errors={{jobType: {message: 'Something went wrong'}}}
/>

Props

Note: You can further enhance the functionality by including the additional props available for the MUI FormGroup component... Read More

Dialog

A Dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear and remain on screen until confirmed, dismissed, or a required action has been taken.

import * as React from 'react';
import Box from '@mui/material/Box';
import {Dialog} from 'tec-web-base';

export default function Component() {
    const [open, setOpen] = React.useState(false);
    return (
        <Box>
            <Dialog
                open={open}
                setOpen={setOpen}
            />
        </Box>
    );
}

You can pass children to Dialog components. This allows you to include additional content, such as text, buttons, or other components, within the dialog.

import * as React from 'react';
import Box from '@mui/material/Box';
import {Dialog} from 'tec-web-base';

export default function Component() {
    const [open, setOpen] = React.useState(false);
    return (
        <Box>
            <Dialog
                open={open}
                setOpen={setOpen}
                children={<Typography>You can pass any JSX/React component here.</Typography>}
            />
        </Box>
    );
}

Props

Note: You can further enhance the functionality by including the additional props available for the MUI Dialog component... Read More

Action Props

Note: You can further enhance the functionality by including the additional props available for the MUI Button component... Read More

FileUpload

The File Upload component allows users to easily select and upload files.

import * as React from 'react';
import Box from '@mui/material/Box';
import {FileUpload} from 'tec-web-base';

export default function BasicTextFields() {
    const [open, setOpen] = React.useState(false);
    return (
        <Box>
            <FileUpload
                name="logo"
                label="Logo"
                accept="image/*"
                onChangeHandler={(event) => {
                    let {files} = event?.target;
                    //Here You can implement your logic.
                }}
            />
        </Box>
    );
}

Props

Note: You can further enhance the functionality by including the additional props available for the MUI Button component... Read More

Note: The documentation for tec-web-base is currently incomplete and is still in the process of being developed. We apologize for any inconvenience this may cause and appreciate your patience.