Help make examples #1

kentcdodds · 2017-07-25T17:57:48Z

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:

fork the example codesandbox here
give it a good title and description
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.
Add the downshift:example tag. That way it shows up in this search
Ping us here when you're done. Thanks!

Old Update:

Hey folks! 👋 now that we've released a beta version, it's much easier to make examples. Now you can make them right in the browser 🎉 (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 👋

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!

The text was updated successfully, but these errors were encountered:

rezof · 2017-07-25T21:04:38Z

will work on the basic example

jtmthf · 2017-07-25T21:08:45Z

I'll start with an Apollo example

kentcdodds · 2017-07-25T21:19:48Z

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 · 2017-07-25T21:54:19Z

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 · 2017-07-25T22:04:59Z

I could work on a Spectre.css example.

That would be amazing! Let's do it!

souporserious · 2017-07-26T01:17:18Z

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 · 2017-07-26T01:23:24Z

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 · 2017-07-26T07:38:32Z

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.

davidnguyen11 · 2017-07-26T08:36:53Z

Ok I will do examples

kentcdodds · 2017-07-26T15:23:36Z

@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 · 2017-07-26T15:23:54Z

@nndung179,

Ok I will do examples

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

davidnguyen11 · 2017-07-26T15:44:31Z

Hi @kentcdodds

I am going to make example with material style

Corjen · 2017-07-26T15:53:12Z

@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 · 2017-07-26T15:53:56Z

Absolutely. Thanks @Corjen!

divyenduz · 2017-07-26T17:04:49Z

I can setup and example with axios and GitHub search API

erikfox · 2017-07-26T19:26:21Z

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

kentcdodds · 2017-07-26T19:27:06Z

Fantastic 🎉

erikfox · 2017-07-26T19:53:54Z

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

Will come up with another example.

kentcdodds · 2017-07-27T06:04:48Z

Hey folks! 👋 now that we've released a beta version, it's much easier to make examples. Now you can make them right in the browser 🎉 (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 · 2017-07-27T06:47:55Z

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

kentcdodds · 2017-07-27T06:53:33Z

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 · 2017-07-27T06:57:13Z

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

geoffdavis92 · 2017-07-31T05:21:14Z

@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 · 2017-07-31T05:34:22Z

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 · 2017-07-31T05:40:08Z

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

kentcdodds · 2017-07-31T05:57:34Z

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 · 2017-07-31T19:46:14Z

@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 · 2017-07-31T23:17:22Z

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

kentcdodds · 2017-08-02T06:21:08Z

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 🎉

Corjen · 2017-08-02T11:53:20Z

@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 · 2017-08-05T20:43:43Z

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 · 2017-08-07T16:52:37Z

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 · 2017-08-08T17:47:16Z

Hey everyone! 👋

~/Developer/downshift (master)
🏎  $ npm publish --tag rc
+ downshift@1.0.0-rc.0

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!

davidnguyen11 · 2017-08-08T17:53:52Z

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

kentcdodds · 2017-08-10T21:08:53Z

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 😄

~/Developer/downshift (master)
🏎  $ npm publish --tag rc
+ downshift@1.0.0-rc.6

agirton · 2017-08-26T05:29:04Z

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 · 2017-08-26T19:37:20Z

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

agirton · 2017-08-27T00:02:18Z

@kentcdodds sent a PR #157 with new examples 😄

mikeplis · 2017-09-28T02:21:02Z

@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 · 2017-09-28T04:03:42Z

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 · 2017-10-09T13:15:01Z

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 · 2017-10-15T03:24:27Z

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

Thanks everyone!

This was referenced Jul 26, 2017

Name change #10

Closed

Look into integrating Lerna #11

Closed

Corjen closed this as completed Jul 26, 2017

Corjen reopened this Jul 26, 2017

Haroenv mentioned this issue Jul 26, 2017

docs(algolia): add example for Algolia React InstantSearch #16

Merged

4 tasks

divyenduz mentioned this issue Jul 26, 2017

example: axios with GitHub search repositories API #21

Merged

4 tasks

kentcdodds closed this as completed Jul 27, 2017

kentcdodds reopened this Jul 27, 2017

This was referenced Jul 30, 2017

Discussion - Consider to move all example into separated projects #59

Closed

completed example with material style #57

Closed

the-simian mentioned this issue Aug 6, 2017

Example, and question about api #94

Closed

kentcdodds added the help wanted label Aug 22, 2017

geoffdavis92 mentioned this issue Aug 26, 2017

Need Exposure of clearSelection, possibly other actions, for Downshift wrapper onChange handler #155

Closed

kentcdodds closed this as completed Oct 15, 2017

ericedem mentioned this issue Feb 27, 2018

Add keyDownHandlers prop #346

Closed

4 tasks

lambert-velir mentioned this issue Aug 26, 2019

role="combobox" added to downshift without <input> #750

Closed

NitsanBaleli pushed a commit to NitsanBaleli/downshift that referenced this issue Mar 15, 2021

fix(hoc): update onChange handler (downshift-js#1)

aa42c96

silviuaavram mentioned this issue Apr 3, 2021

targetWithinDownshift always return false with different execution environment #1255

Closed

Help make examples #1

Help make examples #1

Comments

kentcdodds commented Jul 25, 2017 • edited Loading

rezof commented Jul 25, 2017

jtmthf commented Jul 25, 2017

kentcdodds commented Jul 25, 2017

geoffdavis92 commented Jul 25, 2017 • edited Loading

kentcdodds commented Jul 25, 2017

souporserious commented Jul 26, 2017

kentcdodds commented Jul 26, 2017

Corjen commented Jul 26, 2017

davidnguyen11 commented Jul 26, 2017

kentcdodds commented Jul 26, 2017

kentcdodds commented Jul 26, 2017

davidnguyen11 commented Jul 26, 2017

Corjen commented Jul 26, 2017

kentcdodds commented Jul 26, 2017

divyenduz commented Jul 26, 2017

erikfox commented Jul 26, 2017

kentcdodds commented Jul 26, 2017

erikfox commented Jul 26, 2017

kentcdodds commented Jul 27, 2017

karanjthakkar commented Jul 27, 2017

kentcdodds commented Jul 27, 2017

karanjthakkar commented Jul 27, 2017

geoffdavis92 commented Jul 31, 2017 • edited Loading

kentcdodds commented Jul 31, 2017

geoffdavis92 commented Jul 31, 2017

kentcdodds commented Jul 31, 2017 • edited Loading

geoffdavis92 commented Jul 31, 2017

kentcdodds commented Jul 31, 2017

kentcdodds commented Aug 2, 2017

Corjen commented Aug 2, 2017 • edited Loading

zsid commented Aug 5, 2017 • edited Loading

the-simian commented Aug 7, 2017

kentcdodds commented Aug 8, 2017

davidnguyen11 commented Aug 8, 2017 • edited Loading

kentcdodds commented Aug 10, 2017

agirton commented Aug 26, 2017

kentcdodds commented Aug 26, 2017

agirton commented Aug 27, 2017

mikeplis commented Sep 28, 2017

kentcdodds commented Sep 28, 2017

wcastand commented Oct 9, 2017 • edited Loading

kentcdodds commented Oct 15, 2017

kentcdodds commented Jul 25, 2017 •

edited

Loading

geoffdavis92 commented Jul 25, 2017 •

edited

Loading

geoffdavis92 commented Jul 31, 2017 •

edited

Loading

kentcdodds commented Jul 31, 2017 •

edited

Loading

Corjen commented Aug 2, 2017 •

edited

Loading

zsid commented Aug 5, 2017 •

edited

Loading

davidnguyen11 commented Aug 8, 2017 •

edited

Loading

wcastand commented Oct 9, 2017 •

edited

Loading