{"id":26959167,"url":"https://github.com/git-toni/react-minimal-components","last_synced_at":"2025-04-03T04:37:00.215Z","repository":{"id":57334618,"uuid":"70926160","full_name":"git-toni/react-minimal-components","owner":"git-toni","description":"Minimalistic components for React, not wrapped in \u003cdiv\u003es","archived":false,"fork":false,"pushed_at":"2016-11-27T21:44:44.000Z","size":542,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-03T15:49:34.373Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/git-toni.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":"2016-10-14T16:06:09.000Z","updated_at":"2018-01-03T11:20:05.000Z","dependencies_parsed_at":"2022-09-07T05:31:45.054Z","dependency_job_id":null,"html_url":"https://github.com/git-toni/react-minimal-components","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/git-toni%2Freact-minimal-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/git-toni%2Freact-minimal-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/git-toni%2Freact-minimal-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/git-toni%2Freact-minimal-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/git-toni","download_url":"https://codeload.github.com/git-toni/react-minimal-components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246939176,"owners_count":20857916,"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":[],"created_at":"2025-04-03T04:36:59.684Z","updated_at":"2025-04-03T04:37:00.205Z","avatar_url":"https://github.com/git-toni.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/git-toni/react-minimal-components.svg?branch=master)](https://travis-ci.org/git-toni/react-minimal-components)\n\n# react-minimal-components\n\n\u003e Minimal React components rendering what you'd expect\n\n##Component\nProvided components:\n\n### `\u003cSelect options={...} defaultValue={...} onChange={...} .../\u003e`\n#### Props\n1. `options`: expected to be an array of objects, each providing `label` and `value` attributes(or corresponding `labelField`/`valueField`, see example below.). Eg. `[{label:'One',value:1,myfield:'eRwe34'},...,{label:'Two',value:2,myfield:'x2We33'}]`\n2. `defaultvalue`: it can either be the `value` of one of the `options` *or* a the whole option object. Eg. `{label:'One',value:1,myfield:'eRwe34'}` *or* `1`\n3. `onChange`: this is the only React Event/SyntheticEvent currently implemented in the component. Will call the received function passing it the current object selected from the `options` prop.\n\n#### Examples\n\n##### Basic example\n\n```javascript\nconst options =[\n  {value:34,label:'Hello',voice:'John'}, \n  {value:22, label:'Hola',voice:'Anna'},\n  {value:39, label:'Aloha',voice:'Bender'},\n]\nconst defVal = 34\nconst parentChanger= function(ob){\n  console.log(obj.voice+' says: ', obj.label)\n}\n\nReactDOM.render(\u003cSelect options={options} defaultValue={defVal} onChange={parentChanger}/\u003e\n  , document.querySelector('div#app-container')\n);\n//=\u003e Will render\n//\u003cselect value='34'\u003e\n//  \u003coption value='34'\u003eHello\u003c/option\u003e\n//  \u003coption value='22'\u003eHola\u003c/option\u003e\n//  \u003coption value='39'\u003eAloha\u003c/option\u003e\n//\u003c/select\u003e\n\n// =\u003e 'John says: Hello'\n\n```\n##### Custom value/fields example\n\nUsing custom fields as `value` and `label`.\n```javascript\nconst options =[\n  {myVal:34,tag:'Hello',voice:'John'}, \n  {myVal:22, tag:'Hola',voice:'Anna'},\n  {myVal:39, tag:'Aloha',voice:'Bender'},\n]\nconst defVal = 34\nconst parentChanger= function(ob){\n  console.log(obj.voice+' says: ', obj.label)\n}\n\nReactDOM.render(\u003cSelect options={options} defaultValue={defVal} onChange={parentChanger labelField='tag' valueField='myVal'}/\u003e\n  , document.querySelector('div#app-container')\n);\n//=\u003e Will render\n//\u003cselect value='34'\u003e\n//  \u003coption value='34'\u003eHello\u003c/option\u003e\n//  \u003coption value='22'\u003eHola\u003c/option\u003e\n//  \u003coption value='39'\u003eAloha\u003c/option\u003e\n//\u003c/select\u003e\n\n\n*Note*: React discourages the use of `selected` in the `\u003coption\u003e` tags, hence the `value` attribute at the `\u003cselect\u003e` tag instead.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgit-toni%2Freact-minimal-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgit-toni%2Freact-minimal-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgit-toni%2Freact-minimal-components/lists"}