Toolkit with accessible components, styles, and examples for your next web app
- Tweets 556
- Following 4
- Followers 2,568
- Likes 767
Ariakit retweeted
Looking for opportunities to participate in the Hacktoberfest in a legitimate way?
Let's write some Storybook examples of Reakit components: github.com/reakit/reakit/iss…
1
6
28
In September, we received $65 from 10 backers and we spent $10. Our current balance is $403.
Top backers: @code_e_averett, @rodneyfolz, @lxcid
Thank you! 🙏
opencollective.com/reakit
1
1
Ariakit retweeted
I've made some proposals to Reakit v2 so the API looks like this.
There are 3 main differences from the current API. Can you spot them?
By the way, if we go in this direction, this will be available in v1 without breaking changes.
carbon.now.sh/?bg=rgba(171%2…
ALT Example of Reakit v2 API. Access the text version on the link in the tweet.
5
3
30
Ariakit retweeted
I was curious if I could render hundreds of elements in a @reakitjs Combobox and navigate through them without losing frames.
It was possible after some optimizations: state colocation and subscriptions (like in Redux).
Code in the thread.
5
3
85
Ariakit retweeted
Built this component combining @reakitjs Popover, Combobox, and Menu components.
Initially, I thought it would be completely inaccessible. But turns out that it works great with screen readers. 😱
role="menuitem" seems to be well supported as a combo box suggestion.
5
8
93
Ariakit retweeted
Doing a bit of work today on my @reakitjs + @TailwindCss template today.
What would you want in a template that I'm still missing?
github.com/AliLynne/tailwind…
1
4
5
Ariakit retweeted
I was curious if I could combine the @reakitjs Combobox component and React Suspense with data fetching to asynchronously render suggestions.
It turns out that it's about 70 lines of code (including suspense related code) 😱
codesandbox.io/s/reakit-comb…
GIF with throttled network:
3
3
38
Ariakit retweeted
Reakit v1.3.0-alpha.0 has been released with the experimental Combobox component.
I'll be tweeting some examples for the next few days.
Here's an accessible combobox with inline autocomplete and automatic selection:
6
8
71
In August, one new backer joined. We received $90 from 12 backers and we spent $10. Our current balance is $360.
Top backers: @code_e_averett, @rodneyfolz, @lxcid
Thank you! 🙏
opencollective.com/reakit
1
Huge thanks to @vvoyer for sponsoring us on GitHub! ❤️
github.com/sponsors/reakit
2
Ariakit retweeted
Nice! @reakitjs is ready for the upcoming React 17 release with all tests passing 🎉
github.com/reakit/reakit/run…
Reakit needed some changes to work with the way React 17 handles focus/blur events, you can read more about that here: github.com/reakit/reakit/pul…
1
4
Ariakit retweeted
3 ways to use the upcoming @reakitjs Combobox module.
This API is still a work in progress. Feel free to give feedback. 🙂
Gist: gist.github.com/diegohaz/090…
ALT Screenshot of StaticCombobox code. See gist link in the tweet for the text version.
ALT Screenshot of DynamicCombobox code. See gist link in the tweet for the text version.
ALT Screenshot of CustomFilterCombobox code. See gist link in the tweet for the text version.
4
3
25
Ariakit retweeted
This is how you add keydown event handlers into @reakitjs CompositeItem elements (follow the thread).
How would you respond to keystrokes on a combobox option?
If you were using roving tabindex, the suggestion element would get DOM focus and, therefore, any keystroke would trigger a keydown event on it. So, you could just pass an onKeyDown prop to it.
ALT A combobox with the value "accessibility" and 14 suggestions below it, including "accessibility" itself, which is the first suggestion and can be removed from the list of suggestions by clicking on a button next to it. This remove button has a label "Remove ⌘D".
1
5
Ariakit retweeted
I've been working on composite widgets for quite a while now (reakit.io/docs/composite).
Components that can be built with it include Combobox, Toolbar, Calendar etc.
It has lots of interesting implementation details that I'd like to share in this thread. 👇
4
24
93
Hey @jxom_! Thank you so much for your $5 donation 🙏 - your contribution makes a difference!
opencollective.com/reakit
1
Ariakit retweeted
Looks awesome and the API is neat.
Powered by @reakitjs!
Introducing Bumbag – an accessible & themeable React UI Kit enabling you to rapidly build web apps.
👉 bumbag.style
- 🧱 70+ components
- 🎨 Global & component-level theming
- 📦 Flexible composition
- 🦪 Page shells
- 🌓 Color modes
- 🛍 Variants
- and so much more!
1
5
In July, one new backer joined. We received $103 from 12 backers. Our current balance is $293.
Top backers: @code_e_averett, @rodneyfolz, @pmkhoa
Thank you! 🙏
opencollective.com/reakit
1
Ariakit retweeted
I've learned a lot building this and I'm excited to share my findings.
Next week I'll publish an in-depth thread about composite widgets and how @reakitjs implements it. This may eventually become a blog post.
Composite (reakit.io/docs/composite) is the most powerful Reakit abstraction, which can be used to create Menus, Comboboxes, Calendars etc.
It has lots of interesting implementation details, such as event forwarding.
Would you be interested in a detailed Twitter thread about it?
3
29
Ariakit retweeted
This is how the @reakitjs' Dialog component is composed underneath. React Hooks make it so beautiful.
ALT Screenshot of code snippet showing several React Hooks calls: usePreventBodyScroll, useFocusTrap, useFocusOnChildUnmount, useFocusOnShow, useFocusOnHide, useHideOnClickOutside and useDisableHoverOutside.
2
3
40
Ariakit retweeted
Programmatically controlling the state of @reakitjs Toolbar and Menu components. 👌
This amount of power comes with a lot of responsibility, but it also enables people to create things that I would've never imagined.
CodeSandbox: codesandbox.io/s/reakit-tool…
5
4
54