Community Codesandbox Gallery

[ebonow]

A place for common or tricky "how do I do this?" requests

I wanted to start a thread to perhaps give some more attention to some of the more useful implementations and feature requests out there. I understand that it would be nice if (feature I NEED to have) was built-in, but there is a fine line between convenience and code bloat so thought this would be a nice place to gather some of the more useful implementations I and others have built. This will be a running list so feel free to come back

Editable and Selectable Text Input

When you want to always display the Input and without clearing out the inputValue on blur.
codesandbox

Inline Select (no borders, minimum width):

When you want a discrete select that displays inline with other text.
codesandbox

Expand width of Select to longest Option

When you want to expand the Select to the longest Option (apparently I created two different codesandboxes)
codesandbox1
codesandbox2

Add autoComplete (or any other attribute) to Input

This demonstrates how to add autoComplete or any other Input prop attribute (ie: maxLength, required, etc...)
codesandbox

Setting and using refs for children of custom components

This demonstrates how to approach composability to avoid creating custom components within the same scope as the Select render method.
codesandbox

Using IntersectionObserver to horizontally position a Menu against an edge.

This demonstrates that when a Menu is positioned against an edge and the width is set larger than the Select, it can identify whether to position and align itself to the left or right of the Select to avoid getting clipped off the screen.
codesandbox

Grouping Options (Select all, identifying and styling group options)

This demonstrates how to select all options that belong to a group when clicking on a group header as well as how to style grouped options vs ungrouped options.
codesandbox

Right-click on Select, returns context menu of input (cut, copy, paste)

This demonstrates how to make the input clickable enable users to cut, copy, paste, and select text from the text input (overriding the default 2px input width)
codesandbox

Adding buttons within Menu Options

This demonstrates how to add extra functionality to your Options
codesandbox

Adding styles to your scrollbar menu

This demonstrates how to add styling to the menu scrollbar
codesandbox

Displaying Menu Options in CSS Grid

This demonstrates how to display your menu as a grid
codesandbox

Using CreateFilter with creatable options

This demonstrates how to properly not filter out your "Create Option" when using a custom filter with CreatableSelect.
codesandbox

Creatable Sortable MultiValues

This demonstrates how to use the react-sortable HOC to create sortable multiValues.

Creatable Create MultiValue on comma input

This demonstrates how to create and select new values when a comma is entered into a CreatableSelect
codesandbox

Bootstrap Popover with Select

This demonstrates how to implement a Select inside of a Bootstrap Popover without prematurely closing the popover (Note use of e.composedPath())
codesandbox

Async Lookup with default option value

This demonstrates how to retrieve default options and set the default once the data has fetched
codesandbox

Shared Selects (Include/Exclude from list)

This demonstrates a POC of how to create a shared list of options (perhaps envisioning how a user could have certain roles or attributes added, or a shopping cart)
codesandbox

Input masks

This demonstrates how to write a hook to add methods to a custom input allowing which will provide the user an input mask.
codesandbox

MultiValues with chip overflow

This demonstrates how to show a message of setting a limit of displayed selected values with an indicator badge of how many other values are selected.
codesandbox

MultiValues with values displayed above the Control

This demonstrates how to show the values outside of the Control and ValueContainer components.
codesandbox

React-select as a HTML Select showing all options but selecting as user types

This demonstrates an example on how to recreate the behavior of a HTML Select where the values are scrolled to and selected as the user types without filtering items out of the list.
codesandbox

more examples coming

Floating Labels

Coming soon

Pillbox Multi-Select

Coming soon

Cascading Select

Coming soon

Displaying Errors

Coming soon

[bogdansoare]

Great collection, thanks for sharing this