open-index/open-npm huggingface dataset:
npm package: @nimahkh/formact
Description: Formact is form generator for react with powerfull props
Author: nima habibkhoda
Latest version: 0.0.3

#### Formact is a react form generator component 

#### install 

`
npm i @nimahkh/formact
`

#### How to use 

```
//App.js
import React, {Fragment, useState} from 'react';
import ReactDOM from 'react-dom';
import Field from '../../src';
import FieldStyle from "./FieldStyle";

const App = (props) => {

    const [value, setValue] = useState("");

    function handleChange(e) {
        const inputValue = e.target.value;
        setValue(inputValue)
    }

    return (
        <Fragment>
            <FieldStyle value={value} onChangeProp={(e)=>handleChange(e)}/>
            <Field
                element={"input"}
                type="password"
                label={"password"}
                name="password"
                value={value}
                placeholder="Password"
                variant={"bootstrap"}
            />
            <Field
                element={"input"}
                name="name"
                label={"user name"}
                value={value}
                type="text"
                placeholder="Name"
            />
        </Fragment>
    )
};

ReactDOM.render(<App/>, document.getElementById('root'));

```

```
//FieldStyle.js a simple jss override styling example
import Field from "../../src/Components/Field";
import React from "react";
import withStyles from "react-jss"

const styles={
    container:{
        backgroundColor: "#ccc"
    },
    inputStyle: {
        minWidth: '200px',
        minHeight:'40px',
        appearance: 'none !important',
        border: "1px solid blue",
        borderRadius: 5,
        boxSizing: "border-box",
        fontSize: "0.9rem",
        padding: "1rem 0.5rem",
        marginBottom: 10,
        '&:required': {
            border: '1px solid #333'
        },
        '&:hover': {
            border: '1px solid #333'
        }
    }
}

function FieldStyle (props){

    const {classes}=props;

    return(
        <Field
            inputClass={{
                container:classes.container,
                input : classes.inputStyle
            }}
            element={"input"}
            type="email"
            label={"email"}
            placeholder="Enter email"
            onChange={props.onChangeProp}
            name="email"
            value={props.value}
            required={true}
            variant={"material2"}
        />
    )
}

export default withStyles(styles)(FieldStyle)

```

#### features

- jss
- material and none-material styles
- full props control
- full class override 

#### for now

- supporting text and text area
- overriding label and container classes
- two styles group ( material , bootstrap)

#### Road map

- support RTL
- validations 
- checkboxes
- radio boxes
- buttons
- drop downs
- fieldSets
- step forms
npm package: @nimahkh/iran_beauty
Description: list of iran cities and provinces
Latest version: 4.0.0

## IRAN Beauty

##### a nodejs package to list Iran cities

###### Installation

```
npm install @nimahkh/iran_beauty
```

###### Run in Codes

```
const geoData=require('./lib/geo-data');
const tehran = Object.freeze({
  latitude: 35.715298,
  longitude: 51.404343
});

const find=geoData.findProvincesAround(tehran, {
  radius: 1000,
  unit: 'km'
});


const provinces=geoData.getProvinces();
const cities=geoData.getCities(1);
const citiesAround=geoData.findCitiesAround(tehran)
const nearestProvince=geoData.findNearestProvince(tehran,{radius:1000,unit:'km'})

```

### Methods
##### getCities
this method , export all cities with given id 
##### getProvince
this method , export all provinces
##### findCitiesAround
this method , export cities around of imported city
##### findProvincesAround
this method , export nearest province around of imported province
##### findNearestProvince
this method , export nearest province

With Love For Iran :heartpulse:
npm package: @nimahkh/react-masonry
Description: React masonry component
Author: Nima habibkhoda
Latest version: 0.0.3

#### React simple masonry component

simple react Masonry component

###### setup

`npm i @nimahkh/react-masonry`

###### demo

```
import React, {Fragment, useState} from 'react';
import ReactDOM from 'react-dom';
import Masonry from '@nimahkh/react-masonry/lib';

const App = (props) => {

    const objects = [{
        "id": "0",
        "author": "Alejandro Escamilla",
        "width": 5616,
        "height": 3744,
        "url": "https://unsplash.com/photos/yC-Yzbqy7PY",
        "download_url": "https://picsum.photos/id/0/5616/3744"
    }, {
        "id": "1",
        "author": "Alejandro Escamilla",
        "width": 5616,
        "height": 3744,
        "url": "https://unsplash.com/photos/LNRyGwIJr5c",
        "download_url": "https://picsum.photos/id/1/5616/3744"
    }, {
        "id": "10",
        "author": "Paul Jarvis",
        "width": 2500,
        "height": 1667,
        "url": "https://unsplash.com/photos/6J--NXulQCs",
        "download_url": "https://picsum.photos/id/10/2500/1667"
    }, {
        "id": "100",
        "author": "Tina Rataj",
        "width": 2500,
        "height": 1656,
        "url": "https://unsplash.com/photos/pwaaqfoMibI",
        "download_url": "https://picsum.photos/id/100/2500/1656"
    }, {
        "id": "1000",
        "author": "Lukas Budimaier",
        "width": 5626,
        "height": 3635,
        "url": "https://unsplash.com/photos/6cY-FvMlmkQ",
        "download_url": "https://picsum.photos/id/1000/5626/3635"
    }, {
        "id": "1001",
        "author": "Danielle MacInnes",
        "width": 5616,
        "height": 3744,
        "url": "https://unsplash.com/photos/1DkWWN1dr-s",
        "download_url": "https://picsum.photos/id/1001/5616/3744"
    }, ]


    return (
        <Fragment>
            <Masonry
                items={objects}
                imagekey={"download_url"}
            />

        </Fragment>
    )
};


ReactDOM.render(<App/>, document.getElementById('root'));

```
npm package: @nimahkh/react_all_you_need_in_one_pack
Description: with this module , you can install reactjs with all top dependencies
Author: nima habibkhoda
Latest version: 1.0.2

this project is just for installing and starting ReactJS. we will offer you best components and installing theme for you after install react

### step one
first install reactjs create-react-app <br/>
`sudo npm install -g create-react-app`

### step Two
clone this repository in your folder <br/>
`git clone https://github.com/nimahkh/react-all-in-one-package.git`

### step Tree
go inside of project's folder , and install npm repositories <br/>
`cd react-all-in-one-package && npm i`

### Step Four
start project and answer the questions  <br/>
`node index.js`
# DONE

we will add another repositories too .