open-index/open-npm huggingface dataset:
npm package: @rabahzeineddine/formik
Description: Formik Fields using Material ui
Author: Rabah Zeineddine
Latest version: 1.2.3

# Material-ui Formik components

This project offers [Material-ui](https://material-ui.com/) input fields that works with [Formik](https://formik.org/)

## Why a package was created

As I use [Material-ui](https://material-ui.com/) in my projects, I decided to create this package that offers Material-ui fields as a simple components that works with Formik and manages Formik's methods and values.

## What problem the package solves

Using this package no needs to configure Formik methods on every input.

## How the package solves the problem

It manages Formik's methods on every input.

## All valid configurations/props of the package

### Components

#### TextField

```TSX
import { TextField } from '@rabahzeineddine/formik'

<Formik
    initialValues={{}}
    onSubmit={() => {}}
    >
    <Form>
        <TextField
            name="email"
            label="Email"
        />
    </Form>
</Formik>
```

> For more information check the [TextField Documentation](src/components/TextField/README.md)  

#### MaskedTextField

```TSX
import { MaskedTextField } from '@rabahzeineddine/formik'

<Formik
    initialValues={{}}
    onSubmit={() => {}}
    >
    <Form>
        <MaskedTextField
            name="cellphone"
            label="Cellphone"
            mask=["(",/\d/,/\d/,")"," ",/\d/,/\d/,/\d/,/\d/,/\d/,"-",/\d/,/\d/,/\d/,/\d/]
        >
    </Form>
</Formik>
```

> For more information check the [MaskedTextField Documentation](src/components/MaskedTextField/README.md)  

#### RadioGroup

```TSX
import { RadioGroup, Radio } from '@rabahzeineddine/formik'

<Formik
    initialValues={{}}
    onSubmit={() => {}}
    >
    <Form>
        <RadioGroup name="sex">
            <Radio value="male" label="Male" />
            <Radio value="female" label="Female" />
        </RadioGroup>
    </Form>
</Formik>
```

> For more information check the [RadioGroup Documentation](src/components/RadioGroup/README.md)

#### Select

```TSX
import { Select, Option } from '@rabahzeineddine/formik'

<Formik
    initialValues={{}}
    onSubmit={() => {}}
    >
    <Form>
        <Select name="options" label="Options">
            <Option value="">Select an option</Option>
            <Option value="option1">Option 1</Option>
            <Option value="option2">Option 2</Option>
        </Select>
    </Form>
</Formik>
```

> For more information check the [Select Documentation](src/components/Select/README.md)

#### DatePicker

```TSX
import { DatePicker } from '@rabahzeineddine/formik'

<Formik
    initialValues={{}}
    onSubmit={() => {}}
    >
    <Form>
        <DatePicker name="date" label="Date" />
    </Form>
</Formik>
```

> For more information check the [DatePicker Documentation](src/components/DatePicker/README.md)

## Demos of the package in action

Check the [Storybook page](https://rabahzeineddine.github.io/Formik)

<!-- ## Instructions for contributors -->
npm package: @rabahzeineddine/material-ui
Description: Material ui custom components
Author: Rabah Zeineddine
Latest version: 1.4.0

# Material-ui custom components

This project offers some custom components of [Material-ui](https://material-ui.com/)

## Why a package was created

As I use [Material-ui](https://material-ui.com/) in my projects, I decided to create this package that offers Material-ui custom components

## What problem the package solves

Reuse custom components

## How the package solves the problem

It handles some components of Material-ui and customize it making it easer to use

## All valid configurations/props of the package

### Components

#### Table

This table component is based on [React Grid](https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/getting-started/)

```TSX
import { Table } from '@rabahzeineddine/Material-ui'

<Table 
    columns={columns}
    rows={rows}
/>
```

> For more information check the [Table Documentation](src/components/Table/README.md)

#### PersistentDrawer

```TSX
import { PersistentDrawer, DrawerPage } from '@rabahzeineddine/Material-ui'
import Component from 'Component' // Your component
import Icon from 'Icon' // Component Icon

<PersistentDrawer title={"Drawer"}>
    <DrawerPage component={Component} id="componentId" label="Component" icon={Icon} />
    <DrawerPage component={Component} id="componentId" label="Component" icon={Icon} />
</PersistentDrawer>
```

> For more information check the [Persistent Drawer Documentation](src/components/PersistentDrawer/README.md)

#### FullScreenDialog

```TSX
import { FullScreenDialog } from '@rabahzeineddine/Material-ui'

<FullScreenDialog title={"Dialog title"} closeDialog={handleClose}>
    <div>Dialog Content</div>
</FullScreenDialog>
```

> For more information check the [Full screen dialog Documentation](src/components/FullScreenDialog/README.md)

#### SubmitButton

```TSX
import { SubmitButton } from '@rabahzeineddine/Material-ui'

<SubmitButton label="Submit" loading={loading}>
```

> For more information check the [Full screen dialog Documentation](src/components/SubmitButton/README.md)

#### Tabs

```TSX
import { Tabs, Tab } from '@rabahzeineddine/Material-ui'
import Information from 'Information'
import Addresses from 'Addresses'

<Tabs fullWidth>
    <Tab label="Information" component={Information} />
    <Tab label="Addresses" component={Addresses} />
</Tabs>
```

> For more information check the [Full screen dialog Documentation](src/components/Tabs/README.md)

## Demos of the package in action

Check the [Storybook page](https://rabahzeineddine.github.io/Material-ui/)

<!-- ## Instructions for contributors -->