Selectless NPM

Install

  yarn add selectless
  npm install selectless

Introduction

There are three different ways to use selectless:

On a component level, selectless provides a basic component that you can customize with any css-in-js library or classname/style
On a custom component level, each component provided by selectless accepts a custom render prop that allows you to override the default representation/binding of the component
On a low level controller, selectless provides an HOC that lets you pass down the context props of selectless as props to your component. This allow a full control on how you want to use selectless.

I hope in a near future that me and/or the community can provide pre-styleds for the various css-in-js solutions existing out there.

Inspiration

This package was inspired by the great react-select and the talk from Ryan Florence "Compound Components"

Why we created this package ?

So the purpose of this package is not to replace react-select in a first place but to provide an alternative compatible with css-in-js libraries that let you have full control over the UI of your select without dealing with the logic behind a select.

In a near futur we hope we(our the community) can provide custom made select UI with selectless as module packages for each css-in-js solutions and even SASS, LESS, etc. You can already find some examples in the storybook.

Basic Usage

// src/components/customSelect.js

import React from 'react'
import {Select, Item, Label, List} from 'selectless'

const simpleOptions = [
  {value: 'paris', label: 'Paris'},
  {value: 'newyork', label: 'New-York'},
  {value: 'tokyo', label: 'Tokyo'},
]

const CustomSelect = (props) => (
  <Select name="context" onChange={onChange} options={simpleOptions} {...props}>
    <Label />
    <List renderItem={Item} />
  </Select>
)

export default CustomSelect