Select helps you build selection user interfaces in PureScript with Halogen. You can use it to build dropdowns, typeaheads and autocompletes, date pickers, image pickers, and more, with features like keyboard navigation, accessibility, and state management handled for you. This library takes a unique approach to component design to ensure you can leverage its features without compromising your design in any way.
You can use
Select in your PureScript project with a compatible package manager. The PureScript community typically leverages psc-package or Bower:
1 2 3 4 5
# Using psc-package $ psc-package install halogen-select # Using Bower $ bower install --save purescript-halogen-select
If this is your first time using
Select, start with the tutorials. I'd recommend starting with the simplest example where you'll learn to make a keyboard-navigable dropdown component:
If this isn't your first time, you'll find value in these resources:
- The how-to section contains plenty of short guides for common tasks you'll perform using
Select. Consider it a grab-bag of useful strategies and examples you can refer to when developing new components.
- The concepts section contains more detailed explanations on the design of the library. It will help you understand how to make good design choices and make the most of the tools available to you.
- The reference documentation on Pursuit contains the module documentation and source code. It's a useful reference to verify what functions are available to you.
- The examples folder on Github contains the working source code for all the components in the tutorials. If you're building a similar component, this code can help you get started.
Select provides essential behaviors for selection UI as a flexible, extensible Halogen component. But you won't find a single render function in the code. Instead, with a few helper functions, you can write your own
State -> HTML function however you'd like. You can:
- Extend the component's functionality by embedding new queries in the HTML
- Extend the component's data by including as much additional state from the parent as you want (which you can then use in your render function)
- Leverage the provided features for user interaction, state management, accessibility, and logic
- Retain complete freedom over the design and aesthetic of your selection component
For visual learners
I gave a talk at the Los Angeles PureScript meetup in April 2018 about the approach this library takes. It provides an overview of our design approach, including advantages and drawbacks, as well as a simple walkthrough of building a dropdown. No, the man in the preview isn't me -- that's Phil Freeman, the designer of the PureScript programming language.