Downshift: Help make examples

[kentcdodds]

Latest Update:

Alrighty! We're getting really close now! Just need to tie up some loose ends and make sure we cover all the use cases we want to (ALL OF THEM).

We've released an official "release candidate"

You can install it with:

npm install --save downshift@rc

If you want to help, try implementing an autocomplete/combobox/multi-select/etc. with downshift. You can:

1. fork the example codesandbox here
2. give it a good title and description
3. Update the version (go to dependencies, type downshift for the "package name" and rc for the "version"). Do this even though it already appears in the list of dependencies.
4. Add the downshift:example tag. That way it shows up in this search
5. Ping us here when you're done. Thanks!

---

Old Update:

Hey folks! :wave: now that we've released a beta version, it's _much_ easier to make examples. Now you can make them _right in the browser_ :tada: (thank you @CompuIves!!!)

So, if you've made an example already, would you mind forking this example: http://kcd.im/rac-example and updating it to your example? Then give it a good title and description and add the react-autocompletely:example tag That way it shows up in this search

I'll add a link to that in the README so folks can go see all the awesome examples you all make. Thanks!!!

---

Old stuff

Hey :wave:

We need help making examples. I've scaffolded out things for the examples already, but we need more and need to improve the ones that we already do have. Here's a quick rundown of how to get up and running with the examples:

git clone https://github.com/kentcdodds/react-autocompletely.git
cd react-autocompletely
npm install
cd examples
npm install
npm start

Then open http://localhost:3000/example-name

In the examples directory, you'll find a pages directory. Each of those has an index.js file which is rendered at that route. For example, semantic-ui/index.js will be rendered at: http://localhost:3000/semantic-ui

So, the idea for these examples is they can be examples of just about anything. I have a few in there to show examples of how to implement the API or look and feel that other libraries have. That's mostly to demonstrate the power of the primitives available in react-autocomplete.

Feel free to comment here on what example you're working on. You can update an existing example or create a new one. Just let us know so we don't step on each others toes. Thanks!

Oh, and one other thing, right now this repo is private because I need to clear things with legal before we open source it as a PayPal library. So I have to give you commit access. Regardless of that, if you could, please still make forks and don't commit directly to the repo :) Thanks!

[rezof]

will work on the basic example

[jtmthf]

I'll start with an Apollo example

[kentcdodds]

is the intention here to implement the examples in the react-autocomplete repo (Async, static data etc.) using autocompletely instead?

What would be amazing would be to basically recreate a component that simulates their API using react-autocompletely, then to copy their examples directly if possible.

[geoffdavis92]

I could work on a Spectre.css example.

Or would we strictly be sticking with JS/React autocomplete implementations? (the Spectre component is CSS-only)

[kentcdodds]

I could work on a Spectre.css example.

That would be amazing! Let's do it!

[souporserious]

How do you feel about a Dropdown as well as a Select? Maybe even a name change could help open up more possibilities? I feel like there is a lot of other potential here. Here are some examples I started sketching out. Let me know what you think and I would be happy to submit a PR.

This may be jumping the gun.. but what if this repo had a packages folder that we could stuff these components in and publish to NPM?

[kentcdodds]

Happy to entertain a name change in another issue.

You're right, maybe we should user lerna here. I've never used it before, but this seems like a great use case!

[Corjen]

Sorry, pressed the wrong button there 😄

How do you see the react-select example? Do you mean displaying them side-by-side to compare the difference in API's? I've used react-select a lot, so that would be a nice one for me to start with.

[davidnguyen179]

Ok I will do examples

[kentcdodds]

@Corjen

How do you see the react-select example? Do you mean displaying them side-by-side to compare the difference in API's? I've used react-select a lot, so that would be a nice one for me to start with.

Not side-by-side. If someone wants to see them side-by-side they can open up another tab (we could even provide a link). But making that example page look identical to the react-select example page would be pretty cool.

[kentcdodds]

@nndung179,

Ok I will do examples

Which example will you work on? We want to avoid people working on the same thing.

[davidnguyen179]

Hi @kentcdodds

I am going to make example with material style

[Corjen]

@kentcdodds cool! Will give it go this weekend. Would you be okay with giving some feedback when the first example is done so that I know that I'm going in the right direction?

[kentcdodds]

Absolutely. Thanks @Corjen!

[divyenduz]

I can setup and example with axios and GitHub search API

[erikfox]

Going to get familiar with the existing code by making an example using our web API ;)

[kentcdodds]

Fantastic :tada:

[erikfox]

I have just learned we recently auth_token'd the last of our (previously) open endpoints. 😞

Will come up with another example.

[kentcdodds]

Hey folks! :wave: now that we've released a beta version, it's _much_ easier to make examples. Now you can make them _right in the browser_ :tada: (thank you @CompuIves!!!)

So, if you've made an example already, would you mind forking this example: http://kcd.im/rac-example and updating it to your example? Then give it a good title and description and add the react-autocompletely:example tag That way it shows up in this search

I'll add a link to that in the README so folks can go see all the awesome examples you all make. Thanks!!!

[karanjthakkar]

If anyone has any ideas for examples but are hard pressed on time, I'd love to pick those up.

[kentcdodds]

Here are some ideas. Try reimplementing components from the following libraries:

• semantic-ui
• react-autocomplete
• react-select (I think someone may be working on this one)

I expect there are others... :)

[karanjthakkar]

I can work on this: https://reactcommunity.org/react-autocomplete/managed-menu-visibility/ if no one already is.

[kentcdodds]

Sounds great :+1:

[souporserious]

Going to try an example like this soon

source

[jtmthf]

@kentcdodds For future examples, do you prefer for them to be in code sandbox only or do you also want them here? Downside to code sandbox is that some examples might get out of sync as the API changes if their original authors don't update them.

[kentcdodds]

@jtmthf, good point. Though we're in the same situation either way...

It might be better to have a specific curated list that we as maintainers can manage. I wonder if @CompuIves could eventually add the idea of "Collections" and we could link to a collection of examples 🤔

For now, let's just do everything in codesandbox, and maybe we can add a list of links to the README and keep that up to date ourselves.

[CompuIves]

Wow collections sounds like a great feature and not too hard to make!
That's a very nice way for users to curate examples and content to show to
others, nice idea!

For now you can add the sandboxes to the git repo and use CodeSandbox
import from git. This way everyone can edit the git and the changes are
automatically reflected on the sandbox. Sadly it isn't possible yet to add
tags to git sandboxes, I'm working on this. You can already search on git
repo on the search as alternative.

On Fri, Jul 28, 2017, 00:21 Kent C. Dodds [e-mail] wrote:

@jtmthf https://github.com/jtmthf, good point. Though we're in the same
situation either way...

It might be better to have a specific curated list that we as maintainers
can manage. I wonder if @CompuIves https://github.com/compuives could
eventually add the idea of "Collections" and we could link to a collection
of examples 🤔

For now, let's just do everything in codesandbox, and maybe we can add a
list of links to the README and keep that up to date ourselves.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/paypal/react-autocompletely/issues/1#issuecomment-318429056,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAj1CNDcDJ6QV2EZkW9ncB32k0dKod9Vks5sSMcQgaJpZM4Oi6Dr
.

[kentcdodds]

If someone wants to do that I'm fine, but I think that long-term collections would be better so I'm happy to manually maintain a list on the repo until collections exist :smile:

[souporserious]

Are you cool with leaving Next in there or some sort of way to test out examples in a dev environment? I found it helpful when changing API's and what not so I could test real quick.

[kentcdodds]

Who wants to make this with react-autocompletely? :smile:

[kentcdodds]

Are you cool with leaving Next in there or some sort of way to test out examples in a dev environment? I found it helpful when changing API's and what not so I could test real quick.

Yes, we can do it for that purpose :+1: Though maybe we should clean it up to only have a few. And we should update the README to indicate the new purpose of that project.

[souporserious]

sounds great 👌 also, I might take a stab at the Twitter example this weekend 😉

[kentcdodds]

Another fun one would be to make an implementation of genie with react-autocompletely. Right now the demo is using angular :wink: I always wanted to add a "genies lamp" for react.

[zsid]

genie looks fun. I will have a go over the weekend. 😄

[kentcdodds]

I've updated the Examples section. Please make a PR to that section when you've made your example.

[souporserious]

Some more inspo:

I'm going to try and do one like above this weekend.

[kentcdodds]

There's been some breaking changes released. I've updated kcd.im/rac-example with the latest :smile: Thanks everyone!

[davidnguyen179]

@kentcdodds could I use styled-component to develop component style?

[kentcdodds]

Definitely. The example I liked to uses glamorous. You could just switch it to styled-components 😀

[zsid]

I am really sorry, I won't be able to complete the genie example this weekend as something has come up 😞 Genie looks great and if anyone wants to pick it up please feel free to do it.

[geoffdavis92]

@kentcdodds You want us to update the README? I have my SpectreCSS example (here)

Note: I was having some trouble with the Autocomplete.Menu component, so I copied the files from the /examples directory in the repo to get it working.

[kentcdodds]

Hey @geoffdavis92! Thanks for this! It looks like you're not using the latest react-autocompletely@beta but instead using a specific file in your sandbox. Would you be interested in updating it to the latest beta and adding it to the dependencies? (You can fork this)

[geoffdavis92]

@kentcdodds Sure thing, just updated. But it gives me an invariant violation. It doesn't seem to like the Autocomplete.Menu item.

[kentcdodds]

That was removed. Sorry, things change a lot around here until 1.0.0 is released. See the docs (use the controller). Thanks for any API feedback/help you can give us!

[geoffdavis92]

@kentcdodds Got it working. Do you allow non-contributors to edit the README? Otherwise my example link is here: https://www.codesandbox.io/s/M89KQOBRB

[kentcdodds]

Thanks! Yes, please open a pull request to the README 😀

[kentcdodds]

There's been a significant update! I've updated the README the base example.

Please give it a spin! I'm really excited about the flexibility of the new API! Thank you @jaredly for the inspiration here :tada:

[Corjen]

@kentcdodds great progress, love the new API! 🎉 Couldn't find the time this weekend, but just finished with the first react-select example, see https://codesandbox.io/s/JEKJXDJK

I only need to find a way to clear the input when the items prop changes, do you have any ideas on that? Also, would love some feedback!

[zsid]

Hey @kentcdodds,

Is that the expected behaviour to get isOpen from getInputProps and pass it to the component?

Love the new API! Great work! I have found it much much easier compared to the previous one as I gave a shot at Genie with the old one and it took me much more time to configure compared to now.

PS: your codesandbox example is tagged with react-kadabra 😄

[the-simian]

I've made an example here. Its based on material ui, thought it is a bit different from the existing material-ui example.
As soon as I get some clarity about how to clear selection (correctly), I'd like to submit that to the existing examples.

[kentcdodds]

Hey everyone! :wave:

~/Developer/downshift (master)
🏎  $ npm publish --tag rc
+ [email protected]

I need your help now! The library now has 100% code coverage and is ready to move forward! The first release candidate has been released. I think that the API is solid now and I'd love some feedback on things. Please build some examples and let me know what could be improved!

Please install the latest rc:

npm install downshift@rc

Or fork this codesandbox and create your own examples! Thanks!

[davidnguyen179]

sure I will update example & do some more :). Good job @kentcdodds !!!

[kentcdodds]

Hey folks around here! There was a minor breaking change. Before the onChange handler accepted an object with a selectedItem property, now it is just passed the selectedItem property. See the README :smile:

~/Developer/downshift (master)
🏎  $ npm publish --tag rc
+ [email protected]

[agirton]

Hi @kentcdodds 👋 , to help better understand the downshift API I built a redux version here: https://codesandbox.io/s/0o0w70lp8p does this look ok? I tried to keep it simple but also have some organization.

[kentcdodds]

That's great @agirton! Could you add it to the list of examples in the README? Thank you!

[agirton]

@kentcdodds sent a PR #157 with new examples 😄

[mplis]

@kentcdodds I've got a WIP example of a date picker built with Downshift: https://codesandbox.io/s/nwk52x9qo0

I have a few tweaks I'd like to make, but is there anything in particular you want me to clean up before I submit a PR?

[kentcdodds]

OH WOWOWOWOWOWOWOWOWOW!! That's super awesome!

I'm amazed at how simple it is!

I think it could use some fancy styling. Also, if I could change the month/year for the available selection that'd probably be good too, but this is super cool. Thanks @mplis!

[wcastand]

we can't do thread to respond, that's a shame, i don't want to flood the conversation too much.
@mplis, maybe we could use okami to build the date picker with Downshift.

okami already use date-fns to handle date so must be pretty easy to implement :)

I don't know if that could be a simpler thing but maybe it's worth looking into it :)

really quick try here : https://codesandbox.io/embed/m7wrq8lj0y

[kentcdodds]

I still want examples, but I'm trying to clean things up so I'm going to close this issue.

Thanks everyone!