maslianok / react-select-me Goto Github PK
View Code? Open in Web Editor NEWFast ๐. Lightweight ๐. Configurable ๐. Easy to use ๐ฆ. Give it a shot ๐๐ผ
Home Page: http://maslianok.github.io/react-select-me/
License: MIT License
Fast ๐. Lightweight ๐. Configurable ๐. Easy to use ๐ฆ. Give it a shot ๐๐ผ
Home Page: http://maslianok.github.io/react-select-me/
License: MIT License
Hi @maslianok! Thanks for open sourcing this component! Are you planning on putting out a demo so that users can see the component in action?
In the README docs it is specified that the selectedBlockRenderer
receives as an argument the onRemove
function. I was passing alongside my close icon and nothing happened. After a while I had to see the source code and noticed that the function that actually is passed along is the onChange
, instead of the onRemoveSelected
To clean an input I set my value to null, not undefined, and this results in a crash. I've read this issue and I'm forced to do the same in my Select wrapper: value: value != null ? value : undefined
ReactSelectMe._this.patchSelectedOption
node_modules/react-select-me/lib/ReactSelectMe.js:85
82 |
83 | // search for this option in the `options` array
84 |
> 85 | var value = (typeof selectedOption === 'undefined' ? 'undefined' : _typeof(selectedOption)) === 'object' ? selectedOption[valueKey] : selectedOption;
| ^ 86 | var option = options.find(function (o) {
87 | return _this.getProp(o, valueKey) === value;
88 | });```
will submit pr if you will allow it. obviously this removes alot of unnecessary overhead in using this library.
It would be great to have keyboard support for selecting an item in the list.
const options = [
{ value: 'CA', label: 'California' }
];
<Select options={options} value={''} />
as a workaround i'm using
if(value===''||value===null) {
value = undefined;
}
in my render method
So, I have multiple Select's in a single parent component. Now, in the onChange
, I only get the value selected but it has no information about which CustomSelect
changed. How can I get that information, or how would you achieve the same without wrapping the Select into a separate component?
when value === 0, nothing is selected
example:
const options = [
{ value: 0, label: 'Test' }
];
<Select options={options} value={0} />
this results in nothing being selected.
additionally, it is not possible to select the item who's value is 0, however other options are selectable.
There is a way to implement tab index to the component?
hi,
thank you for the great work!
I tried to use the value: Any , I put it like
value="1"
and value="Any"
both didn't work. Note that 1 means the value of first object in the options.
Whereas isOpened="true"
worked.
Hi,
I have the message in my application about new react-version migration:
react-dom.development.js:12387 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
Please update the following components: ReactSelectMe
It's will be fixed in next releases? Or if I fix it - it's ok?
Thank you for cool select
Hello, I faced with some problem.
I'm using this code:
<SelectMe searchClearOnClose searchable onChange={handler} placeholder={placeholder} options={['red', 'green', 'blue']} value={value} />
I've seen in live example, when we select props 'Searchable' also select automatically prop 'Clear search on close' and when we write some text in input we see realtime filtering by options. But when I tried code above the list of options did not change. What am I doing wrong?
This is the full error.
warning.js?8a56:36 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of ReactSelectMe
. See https://fb.me/react-warning-keys for more information.
Its a very common react error as you know. I even put a key prop in my optionRenderer Component but it still gives me the error. The only time it didnt give me the error was when under listRenderer instead of using the optionRenderer function I used my optionRenderer Component directly instead. But then I lost all the onClick and onChange events which is obvious.
Was wondering If you could shed some light on why is this happening
Hi guys,
First awesome lightweight without 500 props with useless use case =) That could be better if we add @typed/react-select-me support ? What do u think ? Vincent
Hi
Locally the plugin doesn't work only the page is loaded . that is on Win 10
Since this library uses immutable.js (which sucks for treeshaking), having the label "lightweight" can cause confusion for developers expecting smaller build sizes with the packages.
react-select-me
(webpack 4 + uglifyjs, no styles):site.min.js 149 KiB 0 [emitted] main
react-select-me
(webpack 4 + uglifyjs, no styles):site.min.js 295 KiB 0 [emitted] [big] main
Can't install this amazing library right now on my app because it doesn't support react 17.
I think upgrading the support for react 17 wouldn't be hard due to react 17 having few to none breaking changes.
Error while npm installing...
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.7 || ^15.0.0 || ^16.0.0" from [email protected]
npm ERR! node_modules/react-select-me
npm ERR! react-select-me@"^1.3.0" from the root project
i tried like this
<Select
options={searchOptions || options}
value={this.state.value}
onChange={this.onChange}
placeholder='Country'
searchable
onSearch={(query) => this.onSearch(query)}
style={{backgroundColor: 'red', width: 200}}
/>
but it not work.
How do i custom style box and dropbox?
thank you.
E.g., when the component is used inside Form
Hi,
I made sure that all scripts related to the search property implemented but unfortunately no search results appear when typing!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.