https://github.com/git-toni/react-minimal-components
Minimalistic components for React, not wrapped in <div>s
https://github.com/git-toni/react-minimal-components
Last synced: about 1 year ago
JSON representation
Minimalistic components for React, not wrapped in <div>s
- Host: GitHub
- URL: https://github.com/git-toni/react-minimal-components
- Owner: git-toni
- Created: 2016-10-14T16:06:09.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-11-27T21:44:44.000Z (over 9 years ago)
- Last Synced: 2025-03-03T15:49:34.373Z (over 1 year ago)
- Language: JavaScript
- Size: 529 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://travis-ci.org/git-toni/react-minimal-components)
# react-minimal-components
> Minimal React components rendering what you'd expect
##Component
Provided components:
### ``
#### Props
1. `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'}]`
2. `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`
3. `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.
#### Examples
##### Basic example
```javascript
const options =[
{value:34,label:'Hello',voice:'John'},
{value:22, label:'Hola',voice:'Anna'},
{value:39, label:'Aloha',voice:'Bender'},
]
const defVal = 34
const parentChanger= function(ob){
console.log(obj.voice+' says: ', obj.label)
}
ReactDOM.render(
, document.querySelector('div#app-container')
);
//=> Will render
//
// Hello
// Hola
// Aloha
//
// => 'John says: Hello'
```
##### Custom value/fields example
Using custom fields as `value` and `label`.
```javascript
const options =[
{myVal:34,tag:'Hello',voice:'John'},
{myVal:22, tag:'Hola',voice:'Anna'},
{myVal:39, tag:'Aloha',voice:'Bender'},
]
const defVal = 34
const parentChanger= function(ob){
console.log(obj.voice+' says: ', obj.label)
}
ReactDOM.render(
, document.querySelector('div#app-container')
);
//=> Will render
//
// Hello
// Hola
// Aloha
//
*Note*: React discourages the use of `selected` in the `` tags, hence the `value` attribute at the `` tag instead.