publish v3 to npm?

[janusch]

Hey,
thank you for this excellent react component!

I would really like to include v3 in my project, also because of the redux integration, do you think it is ready for prime time?

Would you mind putting it up on npm?

Keep up the great work!

[moroshko]

Hey @janusch, 3.0 is almost there! I still have to finish the docs and examples, but the API is pretty stable. I plan to publish 3.0-alpha on npm in a week or two, but for now I'd encourage you to install the 3.0 branch from GitHub. I'm really interested to get any feedback you have on using 3.0, even if "it just works". Let me know how you go.

[janusch]

Hey,
that is exciting news, looking forward to the alpha.
I got a bit stuck tring to use 3.0 from github, actually just because I could not find the related css files and did not have a less preprocessor. Would it be possible to add a dist version in the 3.0 branch, so that I can just drop the component in following your instructions of the readme.

It is also possible that I approached it the wrong way, by trying to hook the autosuggest up with my existing redux store.

Thank you for the reply!

[moroshko]

I just added dist/ to 3.0. Try to follow the readme and let me know where you are stuck. What do you use to style the Autosuggest? CSS Modules? Global classes? Inline styles? Something else?

[janusch]

I am right now just using an ordinary css stylesheet. Was thinking of switching to sass soon.
Don't you think the best way to publish a reusable react-component would be to package the styles with auto-suggest? Maybe a default theme, or even some themes to choose from and the option to roll ones own?

Maybe the first line makes perfect sensein the dist file, just wondering: var _reactTransformHmr2 = require('react-transform-hmr');
Do you need to include this transform in production?

Thanks a lot for the quick reply and action, I am looking forward to get it to work!

[moroshko]

@janusch Sorry, dist/ is broken at the moment. My brain is not working, it's too late here. I'll fix that tomorrow.

I intentionally didn't include CSS in the component. Autosuggest is all about the mechanics of the accessible interaction, and it has no opinion about how it looks. You can see here an example of styling the Autosuggest using CSS Modules. If you are using global classes just replace .container with .react-autosuggest__container, item with react-autosuggest__item, etc (see the full list here).

[janusch]

Ok, no problem, I can wait until tomorrow.

Thanks for the pointers to styling it, I might give ccs modules a try or go with your hints for global styles.

[moroshko]

@janusch Try now, and let me know how you go.

[janusch]

Cool, thank you, i'll give it a go!

[janusch]

Hey @moroshko ,
I must confess that I did not succeed completely.
The autosuggest displays fine and shows some sample suggestions that I used from the example. Sometimes I get an error: Cannot trim value of undefined. I cannot yet select something from the list and it would replace the old value.
When I tried to add a suggestions reducer i get some weird error in the whole app, probably the wrong way to go. Is autosuggest creating its own state store object, or does it attach to the one I already use?

The way I went was to follow your basic usage example. Maybe you could expand the example a little, so that it is a full react component and integrates with a conventional redux app?

Also now there are three files in the dist folder, I went with only including the import from the example of the readme: import Autosuggest from 'react-autosuggest'; Is that enough?

Ar there any other preconditions that need to be fulfilled for it to work with redux? Because this is where I am stuck right now, to wire up the suggest reducer. I am not quite getting how much I need to implement on the redux end?

Also, how would this work if there are several dynamically generated react-autosuggest components?

I am pretty sure that it is not the fault of react-autosuggest that it does not work out for me right now.

I might try again sometime tomorrow.
Thanks for your time!

[moroshko]

Hey @janusch,

Autosuggest uses redux internally to manage its state, but you shouldn't care about this, it's just an implementation detail.

I updated the Basic Usage example, but note that it doesn't use redux. To see how to connect Autosuggest to a conventional redux app, check out the examples here (all of them except BasicUsage use redux). There are no "preconditions" for Autosuggest. It should just work. I hope that the redux examples would clarify how you should connect Autosuggest to your app. I'd be interested to know if they are not clear enough, and improve them where needed.

You are right, you should just include do: import Autosuggest from 'react-autosuggest'. The other 2 files in the dist folder would be included automatically.

I'm not entirely sure what do you mean by "several dynamically generated react-autosuggest components". Could you elaborate, and provide your use case?

If you are still stuck, could you please share your code? A repo that demonstrates the issue would be even better!

Hope this helps.

[janusch]

Hey @moroshko,
thank your for your reply, it clarifies a lot of things for me!
I am going to give it another go very soon, I am just tied up with some other things that need to get done first.

I'll get back also with input on places where I am still stuck.

[janusch]

Hey @moroshko ,
Just a short summary of how far i have gotten so far:

1. of all, I do really like the documentation, great work!
2. in my onChange callback onChange: (event, { newValue, method }) => {} newValue is always undefined. So I am not yet able to set a new value into the input.
3. the list displays, I just miss the styling. You could consider to make the basic theme available in css, for other people that do not use a less preprocessor but would like some basic styling to get going quick.
4. I had to take the maybe out of the update function to get new values on input change.
5. I am wondering how I can set a default value into the input before the user has interacted with it.
   5b. the thing is that I do want to keep the selected value in my main redux store, whereas the auto-suggest state slice only holds the temporary component state.
6. What is the use case for using method for something, and why does it show up in the reducer?

As you can see I got far but not fully there yet. Now I have hope that react-autosuggest might be able to work for my use case.
It is really nice that you give so much flexibility in how to use this component!

Thanks a lot for taking some time to get me up and running ;)

[janusch]

Oh, one more thing, I might have misunderstood,
I do the async getSuggestions function call in the onChange handler, because I am not sure where else to do it. This leads to every time when a different list item is selected, not picked yet, that my getSuggestions function fires, making another async request. Is that because of taking the maybe out of the maybe reducer case? Where else should the getSuggestions function live, if I want to get suggestions when the user changes the input?

[moroshko]

@janusch Could you share some code so that I could see your setup? It's hard to guess why newValue is undefined without seeing some code.

I'll think about adding a plain CSS to the examples. I hope it doesn't block you for now.

I'm not sure what you mean by this:

I had to take the maybe out of the update function to get new values on input change.
Please share some code and rephrase the issue.

inputProps.value always represents the value of the input. This means that to set a default value to the input field, just make sure to initialise inputProps.value accordingly.

If you want to keep the selected value, just save it in the onSuggestionSelected hook.

Here is why method is needed:
The onChange hook is called every time input's value changes. But, you need to differentiate, for example, between pressing Up/Down, and typing a letter. This is because typing a letter should update suggestions, but pressing Up/Down should not. I hope it makes sense.

Glad to help!

[moroshko]

Just wanted to let you know that 3.0 alpha version is available on npm:

npm install react-autosuggest@3.0-latest --save

[janusch]

Super!
Thank you for your patience and the great feedback!

Merry Christmas