{"id":16126699,"url":"https://github.com/etpinard/dash-textarea-autocomplete","last_synced_at":"2025-03-18T13:31:33.540Z","repository":{"id":45330980,"uuid":"339770135","full_name":"etpinard/dash-textarea-autocomplete","owner":"etpinard","description":"Dash component wrapper for `react-textarea-autocomplete`","archived":false,"fork":false,"pushed_at":"2021-12-20T17:14:57.000Z","size":1567,"stargazers_count":12,"open_issues_count":8,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-18T20:15:13.031Z","etag":null,"topics":["plotly-dash"],"latest_commit_sha":null,"homepage":"","language":"Python","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/etpinard.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":"2021-02-17T15:36:33.000Z","updated_at":"2024-08-16T15:01:22.000Z","dependencies_parsed_at":"2022-08-28T01:51:20.362Z","dependency_job_id":null,"html_url":"https://github.com/etpinard/dash-textarea-autocomplete","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etpinard%2Fdash-textarea-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etpinard%2Fdash-textarea-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etpinard%2Fdash-textarea-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etpinard%2Fdash-textarea-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/etpinard","download_url":"https://codeload.github.com/etpinard/dash-textarea-autocomplete/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221712117,"owners_count":16868078,"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":["plotly-dash"],"created_at":"2024-10-09T21:39:56.420Z","updated_at":"2024-10-27T17:43:13.512Z","avatar_url":"https://github.com/etpinard.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dash Textarea Autocomplete\n\nDash component wrapper for [`@webscopeio/react-textarea-autocomplete`](https://github.com/webscopeio/react-textarea-autocomplete).\n\n![demo](https://github.com/etpinard/dash-textarea-autocomplete/blob/main/demo.gif)\n\n\n## Get started\n\n### Dash for Python\n\n1. Install `dash-textarea-autocomplete`, Dash and its dependencies:\n\n```\npip install dash dash-textarea-autocomplete\n```\n\n2. Run `python usage.py`\n\n```py\n# usage.py\nimport dash_textarea_autocomplete\nfrom dash import Dash, callback, html, Input, Output, State\n\nWORD_LIST = ['apple', 'application', 'apartment',\n             'boat', 'banana', 'boss',\n             'coast', 'code', 'cat']\n\nexternal_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']\n\napp = Dash(__name__, external_stylesheets=external_stylesheets)\n\napp.layout = html.Div([\n    dash_textarea_autocomplete.DashTextareaAutocomplete(\n        id='input',\n        # value='initial value',\n        placeholder='Type something, use `:` to invoke auto-completion',\n        wordList=WORD_LIST,\n        # common options with their default values\n        # triggerChar=':',\n        # minChar=1,\n        style={'minHeight': '100px'},\n        dropdownStyle={'maxHeight': '120px', 'overflow': 'auto'}),\n    html.Div(id='output'),\n    html.Button('CLICK', id='btn'),\n    html.Div(id='output2')\n], className='container')\n\n\n@callback(Output('output', 'children'),\n          Input('input', 'value'))\ndef display_output(value):\n    return 'You have entered: {}'.format(value)\n\n\n@callback(Output('output2', 'children'),\n          Input('btn', 'n_clicks'),\n          State('input', 'value'))\ndef display_output2(n_clicks, value):\n    return 'After click, you have: {}'.format(value)\n\n\nif __name__ == '__main__':\n    app.run_server(debug=True)\n```\n\n3. Visit http://localhost:8050 in your web browser\n\n### Dash for Julia\n\n1. Install `DashTextareaAutocomplete.jl` and `Dash.jl`:\n\n```jl\npkg\u003e activate .\npkg\u003e add Dash DashTextareaAutocomplete\n```\n\n2. Run `julia --project usage.jl` - [click here to see `usage.jl`](https://github.com/etpinard/dash-textarea-autocomplete/blob/main/usage.jl)\n\n3. Visit http://localhost:8050 in your web browser\n\n### Dash for R\n\n_TODO_\n\n## Props\n\n```\n - id (string; optional): The ID used to identify this component in Dash callbacks.\n - value (string; optional): The value displayed in the \u003ctextarea\u003e.\n - placeholder (string; optional): Provides a hint to the user of what can be entered in the \u003ctextarea\u003e field.\n - wordList (list; required): List of string available for auto-completion.\n - triggerChar (string; default \":\"): Character that triggers auto-completion machinery.\n Defaults to `:`. (from `react-textarea-autocomplete`)\n - minChar (number; default 1): Number of characters that user should type for trigger a suggestion.\n Defaults to 1. (from `react-textarea-autocomplete`)\n - className (string; optional): Class names of the \u003ctextarea\u003e (from `react-textarea-autocomplete`).\n - containerClassName (string; optional): Class names of the textarea container (from `react-textarea-autocomplete`).\n - style (dict; optional): Style of the \u003ctextarea\u003e.(from `react-textarea-autocomplete`).\n - listStyle (dict; optional): Style of the list wrapper (from `react-textarea-autocomplete`).\n - itemStyle (dict; optional): Styles of the items wrapper.\n - loaderStyle (dict; optional): Style of the loader wrapper (from `react-textarea-autocomplete`).\n - containerStyle (dict; optional): Styles of the textarea container (from `react-textarea-autocomplete`).\n - dropdownStyle (dict; optional): Styles of the dropdown wrapper.\n ```\n\n## Contributing\n\nSee [CONTRIBUTING.md](https://github.com/etpinard/dash-textarea-autocomplete/blob/main/CONTRIBUTING.md)\n\n## License\n\n[MIT](https://github.com/etpinard/dash-textarea-autocomplete/blob/main/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetpinard%2Fdash-textarea-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fetpinard%2Fdash-textarea-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetpinard%2Fdash-textarea-autocomplete/lists"}