{"id":21592842,"url":"https://github.com/blackbes/react-yii2-essentials","last_synced_at":"2025-07-19T11:07:35.731Z","repository":{"id":57347948,"uuid":"296006496","full_name":"BlackBes/react-yii2-essentials","owner":"BlackBes","description":"React package with components for Yii2. It`s supports main yii2-fields and other usefull yii2 components and features like authentification and server side fields validation.","archived":false,"fork":false,"pushed_at":"2021-01-04T16:21:07.000Z","size":1394,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-18T13:27:34.198Z","etag":null,"topics":["react","react-yii2","react-yii2-essentials","reactcomponents","reactjs","yii2"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BlackBes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-16T11:00:48.000Z","updated_at":"2021-03-26T20:25:52.000Z","dependencies_parsed_at":"2022-08-28T01:40:40.334Z","dependency_job_id":null,"html_url":"https://github.com/BlackBes/react-yii2-essentials","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBes%2Freact-yii2-essentials","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBes%2Freact-yii2-essentials/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBes%2Freact-yii2-essentials/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBes%2Freact-yii2-essentials/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BlackBes","download_url":"https://codeload.github.com/BlackBes/react-yii2-essentials/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248313520,"owners_count":21082871,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-yii2","react-yii2-essentials","reactcomponents","reactjs","yii2"],"created_at":"2024-11-24T17:10:09.132Z","updated_at":"2025-04-10T23:24:29.629Z","avatar_url":"https://github.com/BlackBes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"### ATTENTION: Library is currently in development. We are looking for maintainers\n\n### react-yii2-essentials\n\n\u003e React components, that support working with Yii2.\n\n[![NPM](https://img.shields.io/npm/v/react-yii2-essentials.svg)](https://www.npmjs.com/package/react-yii2-essentials) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)  [![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2FBlackBes%2Freact-yii2-essentials\u0026count_bg=%2379C83D\u0026title_bg=%23555555\u0026icon=react.svg\u0026icon_color=%2361DBFB\u0026title=hits\u0026edge_flat=false)](https://hits.seeyoufarm.com)\n\n### Install\nFirst of all be sure that you have Redux installed\n\n```bash\nnpm install @reduxjs/toolkit\n\nnpm install redux\n\nnpm install react-redux\nnpm install --save-dev redux-devtools\n```\nAfter installing Redux run this command\n\n```bash\nnpm install --save react-yii2-essentials\n```\n\nWe recommend installing Yii2 library `blackbes/yii2-yiireact` [YiiReact GitHub Page](https://github.com/BlackBes/yii2-yiireact) on your web server in order to simplify usage of this package\nIt provides React CRUD generator for gii that can generate required controllers and react pages for models.\n```bash\ncomposer require blackbes/yii2-yiireact\n```\n\n### Usage\nThis library provides you with components that are able to perform yii2 validation and fetch data from\nyour Yii2 server.\n\nValidation will be performed by built in function in yii-validation.js\nThis function uses Redux to define your web server address and uses bearer token to access it.\n\nIt will send a request to\nSo in order to make function work correctly, you must add a reducer called `api.js` with properties listed below:\n\n```js\n authToken: '', //here will be your bearer token\n address: '', //here you specify your web server url\n```\n\n```js\n //validation function will use this data to send axios request to\nawait axios({\n    method: 'post',\n    //your web server must have this url for models validation\n    url: address + '/validate-model-input',\n    data: stringify({\n      //this data is taken from component props\n      model: model,\n      name: name,\n      value: value\n    }),\n    headers: {\n      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',\n      Authorization: 'Bearer ' + authToken\n    }\n})\n```\n\nComponents List\n---------------\n\n### Input field\nGenerates input field with validation\n\n```jsx\n\u003cInputField /\u003e\n\n propTypes = {\n    /** Name of field in model. */\n    name: PropTypes.string.isRequired,\n    /** Name of a model. */\n    model: PropTypes.string,\n    /** Value of field. */\n    value: PropTypes.any,\n    /** Label for input. If it empty or bool:false, using a field name. */\n    label: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n    /** Add more classes to field container. */\n    class: PropTypes.string,\n    /** Placeholder for input. */\n    placeholder: PropTypes.string,\n    /** Function, that handle change event. */\n    onChange: PropTypes.func,\n    /** Required. */\n    required: PropTypes.bool,\n    /** Help block text */\n    helpBlock: PropTypes.string,\n    /** Help block text */\n    validated: PropTypes.any,\n    /** Other props for plugin */\n    pluginProps: PropTypes.object\n  }\n```\n\n### Text area\nGenerates text area with validation\n\n```jsx\n\u003cTextArea /\u003e\n\npropTypes = {\n    /** Name of field in model. */\n    name: PropTypes.string.isRequired,\n    /** Name of a model. */\n    model: PropTypes.string,\n    /** Label for input. If it empty or bool:false, using a field name. */\n    label: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n    /** Add more classes to field container. */\n    class: PropTypes.string,\n    /** Placeholder for input. */\n    placeholder: PropTypes.string,\n    /** Function, that handle change event. */\n    onChange: PropTypes.func,\n    /** Required. */\n    required: PropTypes.bool,\n    /** Help block text */\n    helpBlock: PropTypes.string,\n    /** Help block text */\n    validated: PropTypes.any,\n    /** Other props for plugin */\n    pluginProps: PropTypes.object\n  }\n```\n\n### Radiobutton\nGenerates radiobutton or radiobutton list depending on the amount of keys\n\n```jsx\n\u003cRadioButton /\u003e\n\npropTypes = {\n    /** Name of field in model. */\n    name: PropTypes.string,\n    /** Name of a model. */\n    model: PropTypes.string,\n    /** Label for input. If it empty or bool:false, using a field name. */\n    label: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n    /** Add more classes to field container. */\n    class: PropTypes.string,\n    /** object Key and value*/\n    options: PropTypes.object,\n    /** Values of fields. */\n    value: PropTypes.oneOfType([\n      PropTypes.string,\n      PropTypes.number\n    ]),\n    /** Function, that handle change event. */\n    onChange: PropTypes.func,\n    /** Other props for plugin */\n    pluginProps: PropTypes.object,\n    /** Set required icon (require server validation!) */\n    required: PropTypes.bool\n  }\n```\n\n### Checkbox\nGenerates Checkbox or Checkbox list depending on the amount of keys\n\n```jsx\n\u003cCheckBox /\u003e\n\npropTypes = {\n    /** Name of field in model. */\n    name: PropTypes.string.isRequired,\n    /** Name of a model. */\n    model: PropTypes.string,\n    /** Label for input. If it empty or bool:false, using a field name. */\n    label: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n    /** Add more classes to field container. */\n    class: PropTypes.string,\n    /** object Key and value */\n    options: PropTypes.object,\n    /** Values of fields. */\n    values: PropTypes.objectOf(PropTypes.bool),\n    /** Key of field. */\n    key: PropTypes.any,\n    /** Other props for plugin */\n    pluginProps: PropTypes.object,\n    /** Set required icon (require server validation!) */\n    required: PropTypes.bool\n  }\n```\n\n### Dropdown list\nGenerates dropdown list with verification\n\n```jsx\n\u003cDropDownList /\u003e\n\npropTypes = {\n    /** Name of field in model. */\n    name: PropTypes.string.isRequired,\n    /** Name of a model. */\n    model: PropTypes.string,\n    /** Label for input. If it empty or bool:false, using a field name. */\n    label: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n    /** Add more classes to field container. */\n    class: PropTypes.string,\n    /** Options array */\n    options: PropTypes.arrayOf(PropTypes.object),\n    /** Selected value */\n    value: PropTypes.any,\n    /** Function, that handle change event. */\n    onChange: PropTypes.func,\n    /** Required. */\n    required: PropTypes.bool,\n    /** Help block text */\n    helpBlock: PropTypes.string,\n    /** Validation value. Can be empty string or bool */\n    validated: PropTypes.any,\n    /** Default value text */\n    defaultValueText: PropTypes.string,\n    /** Other props for plugin */\n    pluginProps: PropTypes.object\n  }\n```\n### BreadCrumbs\nGenerates breadcrumbs\n\nTo use this, you must add `breadcrumbs.js` reducer with following code:\n```\n//imports\nconst initialState = {\n    breadcrumbs : []\n};\n\nconst breadcrumbs = (state = initialState, action) =\u003e {\n    switch (action.type) {\n        case SET_BREADCRUMBS: {\n            return {\n                ...state,\n                breadcrumbs: action.data\n            };\n        }\n        default:\n            return state;\n    }\n};\n\nexport default breadcrumbs;\n```\n\n```jsx\n\u003cBreadCrumbs /\u003e\n\npropTypes = {\n    /** breadcrumbs. */\n    breadcrumbs: PropTypes.object,\n    name: PropTypes.string\n  }\n\n/** example */\n\nlet bread = [\n    {\n        name: 'Home',\n        link: '/'\n    },\n    {\n        name: 'Clients',\n        link: '/clients'\n    },\n    {\n        name: \"Create\",\n        link: ''\n    },\n];\n\u003cBreadCrumbs breadcrumbs={bread} /\u003e\n```\n\n### DataProvider\nComponent for generating and rendering index data. Analogue to yii2's DataProvider\n```jsx\n\n\u003cDataView/\u003e\n\npropTypes = {\n    /** An array with fetched rows. */\n    models: PropTypes.array,\n    /** Model name. */\n    model: PropTypes.string,\n    /** Model attributes to be rendered. Ex: {id: 'Item Id', name: 'Item Name'} */\n    attributes: PropTypes.object,\n    /** Model actions to manipulate selected row. Ex: {view: {title: \"view\", icon: (Optional) HTML markup or Font Awesome\u003e}, update: {title: \"update\"},} */\n    actions: PropTypes.object,\n    /** Assoc. array with onModalOpen() callback. Ex: modalActions={{ onModalOpen: () =\u003e {setModal(true)}}} */\n    modalActions: PropTypes.object,\n    /** (Optional) Text or HTML markup to be rendered if table is empty. Default value: 'Create your first item' */\n    ifEmpty: PropTypes.any,\n    /** An assoc array with required data to create pagination.\n     * @param pagination.currentPage Current selected page\n     * @param pagination.totalPages Total pages\n     * @param pagination.callback Callback that will trigger when pagination button clicked\n     * */\n    pagination: PropTypes.object,\n  }\n\n/** example */\n\n\u003cDataView\n    models={}\n    modelName={\"\u003cmodel name\u003e\"}\n    className={\"\u003ccolumn style class\u003e\"}\n    attributes={{\n    //Shown attribute of model {attribute: lable}\n    id: \"ID\",\n    name: \"\",\n    user: \"\",\n    }}\n    actions={{\n    view: {title: \"view\"},\n    update: {title: \"update\"},\n    delete: {title: \"delete\"},\n    restore: {title: \"restore\"},\n    }}\n    modalActions={{\n    onModalOpen: this.actionOpenModal,\n    }}\n    ifEmpty={\"Create first element\"}\n    pagination={{\n    currentPage: this.state.page,\n    totalPages: this.state.data.total_pages,\n    callback: this.actionPagination\n    }}\n/\u003e\n\n```\n\n### Pagination\nSetups pagination\n\n```jsx\n\u003cPagination /\u003e\n\n/**\nexample\n*/\n\nfunction actionPagination(page) {\n        this.setState({currentPage: page})\n        console.log(page)\n    }\n\n\u003cPagination\n    currentPage={this.state.currentPage}\n    totalPages={10}\n    callback={actionPagination}\n/\u003e\n```\n### PrivateRoute\nAllows to access routes by user with valid auth token.\nRedirects to /login on fail\n```jsx\n\u003cPrivateRoute /\u003e\n\n\u003cPrivateRoute exact path='/users' component={UsersIndex}/\u003e\n\n```\n\n### AuthTypeRoute\n Modified version of PrivateRoute\n Allows to access routes by user with one or multiple auth types and valid auth token\n Redirects to /login on fail\n```jsx\n\u003cAuthTypeRoute /\u003e\n\n\u003cAuthTypeRoute exact path='/users' component={UsersIndex} authType={[1, 2]} /\u003e\n\n```\n\nPreloaders\n----------\n### DataLoader\nPreloader adds spinning circle\n```jsx\nif (this.state.isDataLoaded){\n    return render(\n        //...\n        )\n} else {\n    return render(\n         \u003cDataLoader /\u003e\n);\n}\n```\n### IndexDataLoader\nPreloader creates view of unloaded fields\n```jsx\nif (this.state.isDataLoaded){\n    return render(\n        //...\n        )\n} else {\n    return render(\n    \u003cIndexDataLoader /\u003e\n    );\n}\n```\n### TableLoader\nPreloader creates view of unloaded table on index page\n```jsx\nif (this.state.isDataLoaded){\n    return render(\n        //...\n        )\n} else {\n    return render(\n    \u003cTableLoader /\u003e\n    );\n}\n```\n\n### Contributing\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\n\nPlease make sure to update tests as appropriate.\n\n### License\n\nMIT © [BlackBes](https://github.com/BlackBes)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblackbes%2Freact-yii2-essentials","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblackbes%2Freact-yii2-essentials","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblackbes%2Freact-yii2-essentials/lists"}