{"id":17004528,"url":"https://github.com/tarikhuber/material-ui-expandable-text-field","last_synced_at":"2026-04-29T16:33:37.404Z","repository":{"id":54668462,"uuid":"85968300","full_name":"TarikHuber/material-ui-expandable-text-field","owner":"TarikHuber","description":"Expandable TextField from the react Material-UI components","archived":false,"fork":false,"pushed_at":"2017-03-24T14:26:18.000Z","size":3606,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-29T00:11:17.447Z","etag":null,"topics":["expandable","expandabletextfield","material-ui","textfield"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TarikHuber.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-23T15:49:46.000Z","updated_at":"2022-08-18T12:37:45.000Z","dependencies_parsed_at":"2022-08-13T23:20:38.410Z","dependency_job_id":null,"html_url":"https://github.com/TarikHuber/material-ui-expandable-text-field","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TarikHuber/material-ui-expandable-text-field","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TarikHuber%2Fmaterial-ui-expandable-text-field","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TarikHuber%2Fmaterial-ui-expandable-text-field/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TarikHuber%2Fmaterial-ui-expandable-text-field/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TarikHuber%2Fmaterial-ui-expandable-text-field/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TarikHuber","download_url":"https://codeload.github.com/TarikHuber/material-ui-expandable-text-field/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TarikHuber%2Fmaterial-ui-expandable-text-field/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262406946,"owners_count":23306285,"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":["expandable","expandabletextfield","material-ui","textfield"],"created_at":"2024-10-14T04:43:50.730Z","updated_at":"2025-09-25T13:29:23.377Z","avatar_url":"https://github.com/TarikHuber.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Material-UI Expandable TextField\n\n## Table of Contents\n\n- [Description](#description)\n- [Installation](#instalaltion)\n- [Usage](#usage)\n    - [Preparation](#preparation)\n        -[Material-UI](#material-ui)\n        -[Reducers](#reducers)\n    - [Examples](#examples)\n    - [Properties](#properties)\n- [Contributing](#contributing)\n\n\n## Description\n\nMaterial-UI Expandable TextField is a React-Redux component that uses [Material-UI](http://www.material-ui.com/) to create a Expandable TextField.\n\nThe main reason to use only containers and not prepared TextFields with this behavior is that you can now change the style of the TextField and the IconButtons as you like. You can also use other components to hide and display them on click events.\n\nYou can also place the Button and the TextField in seperate places. They bound only by the same `id` you give them.\n\nYou can try it out the [DEMO](https://tarikhuber.github.io/material-ui-expandable-text-field/).\n\n## Installation\n\nThis project can be istalled as npm module using following command:\n\n```bash\nnpm i -S material-ui-expandable-text-field\n```\n\n## Usage\n\n\n### Preparation\n\n#### Material-UI\n\nFor this project components to work in your application after the npm installetion you have to be shure that everithing is correctly setup for Material-UI to work. You can find more about that [here](https://github.com/callemall/material-ui#installation).\n\n#### Reducers\n\nNo mather where you store your reducers the project components need access to a specific reducer and its state. For that we add to our reducers `index.js` file where we compine all our reducers the following two reduces:\n\n```js\n\nimport { combineReducers } from 'redux';\nimport {expandableTextFields} from 'material-ui-expandable-text-field';\n\nconst reducers = combineReducers({\n  expandableTextFields\n})\n\nexport default reducers;\n\n```\n\nThat are the points we have to do before using this module in our application.\n\n\n### Examples\n\nThe module contains of two main parts:\n* **ExpandableTextFieldContainer** the container in witch we set our TextField\n* **ETFIconButtonContainer** the container in witch we set our IconButtons witch triggeractions\n\nAll can be imported like this:\n\n```js\n\nimport {\n  ExpandableTextFieldContainer,\n  ETFIconButtonContainer\n} from 'material-ui-expandable-text-field'\n\n```\n\nAll of them are just containers in witch you can put all your other application components:\n\n```js\n\n\u003cdiv\u003e\n\u003cETFIconButtonContainer\n  value={true}\n  hideOnOpen={true}\n  id={'1'}\u003e\n  \u003cActionSearch/\u003e\n\u003c/ETFIconButtonContainer\u003e\n\u003cETFIconButtonContainer\n  value={false}\n  hideOnClose={true}\n  id={'1'}\u003e\n  \u003cNavigationClose/\u003e\n\u003c/ETFIconButtonContainer\u003e\n\u003cExpandableTextFieldContainer id={'1'}\u003e\n  \u003cTextField\n    floatingLabelText={'Text field with autofocus'}\n    ref={(ref) =\u003e {if(ref!=null){ref.focus()}}}\n    id={'1'}\n  /\u003e\n\u003c/ExpandableTextFieldContainer\u003e\n\u003c/div\u003e\n\n```\n\n\n**NOTICE**: - both of those components need the propertie **id** to colaborate corectly. Each TextField witch is in a ExpandableTextFieldContainer should have a diferent `id`.\n\nYou can also import the Actions from the module to trigger them when you want and without the prepared containers.\n\nThe actions available in this module are: `setIsETFOpen`, `toggleETF`.\n\nWe can import them from the module like this:\n\n```js\n\nimport {\n  ExpandableTextFieldContainer,\n  ETFIconButtonContainer,\n  setIsETFOpen,\n  toggleETF\n} from 'material-ui-expandable-text-field'\n\n```\n\nAn complete example with all the actions called can be found in the [App.js](https://github.com/TarikHuber/material-ui-expandable-text-field/blob/master/demo/src/App.js) of the demo part of this project.\n\n### Properties\n\nExpandableTextFieldContainer:\n* **id** - (string) **required** - the `id` with witch we identify witch containers act together\n\nETFIconButtonContainer:\n* **id** - (string) **required** - the `id` with witch we identify witch containers act together\n* **value** - (boolean) optional - if you set it to `true` the button will only make the TextField visible. If it is `false` it can only hide the TextField and if you don't set a value the `ETFIconButtonContainer` will act as a toggler for the TextField visibility.\n* **hideOnOpen** - (boolean) optional - if `true` the botton will hide when the TextField is open\n* **hideOnClose** - (boolean) optional - if `true` the botton will hide when the TextField is closed\n* **closeOthers** - (boolean) optional - if `true` by clicking the button all other open ExpandabldeTextFields will closeOthese\n* **onETFChange** - (function) optional - a callback function that will be triggered on TextField visibility change\n\n\n## Contributing\n\nEvery help no mather if it is a kritik, suggestion or pull request is welkome :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftarikhuber%2Fmaterial-ui-expandable-text-field","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftarikhuber%2Fmaterial-ui-expandable-text-field","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftarikhuber%2Fmaterial-ui-expandable-text-field/lists"}