🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

react-responsive-select

Package Overview
Dependencies
Maintainers
1
Versions
136
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-responsive-select - npm Package Compare versions

Comparing version

3.2.0
to
3.2.1

2

package.json
{
"name": "react-responsive-select",
"version": "3.2.0",
"version": "3.2.1",
"description": "A React customisable, touchable, single-select / multi-select form component. Built with keyboard and screen reader accessibility in mind.",

@@ -5,0 +5,0 @@ "main": "dist/ReactResponsiveSelect.js",

72

README.md

@@ -46,38 +46,23 @@ # React Responsive Select

```js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import React from 'react';
import ReactResponsiveSelect from 'react-responsive-select';
class Form extends Component {
const reportChange = (newValue) => console.log(newValue);
reportChange(newValue) {
console.log(newValue);
}
render() {
return (
<form ref={r => this.form = r}>
<ReactResponsiveSelect
caretIcon={<span style={{float:'right'}}>+</span>}
name="make"
options={[
{ text: 'Any', value: 'null' },
{ text: 'Oldsmobile', value: 'oldsmobile', markup: <span>Oldsmobile</span> },
{ text: 'Ford', value: 'ford', markup: <span>Ford</span> }
]}
onChange={this.reportChange}
onSubmit={() => { this.form.submit(); }}
prefix="Make:"
selectedValue="mazda"
/>
</form>
);
}
}
ReactDOM.render(
<Form />,
document.getElementById('root')
const Form = () => (
<form ref={r => this.form = r}>
<ReactResponsiveSelect
name="make"
options={[
{ text: 'Any', value: 'null' },
{ text: 'Oldsmobile', value: 'oldsmobile', markup: <span>Oldsmobile</span> },
{ text: 'Ford', value: 'ford', markup: <span>Ford</span> }
]}
prefix="Make:"
selectedValue="mazda"
onSubmit={() => { this.form.submit(); }}
onChange={reportChange}
caretIcon={<span>+</span>}
/>
</form>
);

@@ -87,3 +72,3 @@ ```

A more detailed usage example can be found here:
https://github.com/benbowes/react-responsive-select/blob/master/demo.js
https://github.com/benbowes/react-responsive-select/blob/master/demo/src/index.js

@@ -149,3 +134,3 @@ ---

markup: &lt;span&gt;Fiat&lt;/span&gt;
}]</code></p><p><code>text</code> (Required) display value for the select and the default for the option label</p><p><code>value</code> (Required) value that is submitted</p><p><code>markup</code> (Optional) JSX markup used as the option label. Allows for the use of badges and icons...</p><p>Note: <code>text</code> is used as the option label when <code>markup</code> is not present</p></td>
}]</code></p><p><code>text:</code> (Required) display value for the select and the default for the option label</p><p><code>value:</code> (Required) value that is submitted</p><p><code>markup:</code> (Optional) JSX markup used as the option label. Allows for the use of badges and icons...</p><p>Note: <code>text</code> is used as the option label when <code>markup</code> is not present</p></td>
</tr>

@@ -187,4 +172,7 @@ <tr>

<td>Function</td>
<td><p>Allows you to format your own select label</p><p>The customLabelRenderer function returns <code>{ name: select.name, value: option.value, text: option.text, markup: JSX Object }</code></p>
<p>To use this feature you need to return some JSX; using values from the above object to create your own custom label. See the example in the [singleselect demo](https://github.com/benbowes/react-responsive-select/blob/master/demo/src/index.js#L139) or the [multiselect demo](https://github.com/benbowes/react-responsive-select/blob/master/demo/src/index.js#L573-L577)</p>
<td><p>Allows you to format your own select label</p><p>The customLabelRenderer function returns an option object e.g. <code>{ name: select.name, value: option.value, text: option.text, markup: JSX Object }</code></p>
<p>To use this feature you need to return some JSX; using values from the above object to create your own custom label.
See the example in the [singleselect demo](https://github.com/benbowes/react-responsive-select/blob/master/demo/src/index.js#L144).
</p>
</td>

@@ -211,2 +199,12 @@ </tr>

</tr>
<tr>
<td>customLabelRenderer</td>
<td>Function</td>
<td><p>Allows you to format your own select label</p><p>The customLabelRenderer function returns an array option objects e.g. <code>[{ name: select.name, value: option.value, text: option.text, markup: JSX Object }]</code></p>
<p>To use this feature you need to return some JSX; using values from the above object to create your own custom label.
See the example in the [multiselect demo](https://github.com/benbowes/react-responsive-select/blob/master/demo/src/index.js#L589-L591).
</p>
</td>
</tr>
</table>

@@ -213,0 +211,0 @@ 

.npmignore