{"id":22642437,"url":"https://github.com/kilix/selectless","last_synced_at":"2026-03-08T19:36:18.203Z","repository":{"id":57356542,"uuid":"99900344","full_name":"Kilix/selectless","owner":"Kilix","description":"select in react with context","archived":false,"fork":false,"pushed_at":"2017-10-19T08:34:59.000Z","size":1531,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-25T19:13:04.808Z","etag":null,"topics":["autocomplete","css-in-js","multi-select","react","react-select","select"],"latest_commit_sha":null,"homepage":"http://blog.kilix.fr/selectless/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Kilix.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-10T08:32:03.000Z","updated_at":"2023-12-01T07:31:22.000Z","dependencies_parsed_at":"2022-09-05T04:21:19.048Z","dependency_job_id":null,"html_url":"https://github.com/Kilix/selectless","commit_stats":null,"previous_names":["wcastand/selectless"],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kilix%2Fselectless","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kilix%2Fselectless/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kilix%2Fselectless/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kilix%2Fselectless/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kilix","download_url":"https://codeload.github.com/Kilix/selectless/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248493245,"owners_count":21113214,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autocomplete","css-in-js","multi-select","react","react-select","select"],"created_at":"2024-12-09T05:06:49.259Z","updated_at":"2026-03-08T19:36:18.139Z","avatar_url":"https://github.com/Kilix.png","language":"JavaScript","readme":"\u003ch1 align=\"center\"\u003e\n  Selectless\n  \u003cbr\u003e\n\u003c/h1\u003e\n\u003cp align=\"center\" style=\"font-size: 1.2rem;\"\u003eCustom Select without predefined UI for React using Context\u003c/p\u003e\n\n[![Build Status][build-badge]][build]\n[![Code Coverage][coverage-badge]][coverage]\n[![version][version-badge]][package]\n[![MIT License][license-badge]][LICENSE]\n\n## Install\n\n```\n  yarn add selectless\n  npm install selectless\n```\n\n## Introduction\n\nThere are three different ways to use `selectless`:\n\n- On a component level, `selectless` provides a basic component that you can customize with any css-in-js library or classname/style\n- 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\n- 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`.\n\nI 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.\n\n## Inspiration\nThis package was inspired by the great `react-select` and the talk from Ryan Florence [\"Compound Components\"](https://www.youtube.com/watch?v=hEGg-3pIHlE)\n\n## Why we created this package ?\n\nSo 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.\n\nIn 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.\n\n## Basic Usage\n```javascript\n// src/components/customSelect.js\n\nimport React from 'react'\nimport {Select, Item, Label, List} from 'selectless'\n\nconst simpleOptions = [\n  {value: 'paris', label: 'Paris'},\n  {value: 'newyork', label: 'New-York'},\n  {value: 'tokyo', label: 'Tokyo'},\n]\n\nconst CustomSelect = (props) =\u003e (\n  \u003cSelect name=\"context\" onChange={onChange} options={simpleOptions} {...props}\u003e\n    \u003cLabel /\u003e\n    \u003cList renderItem={Item} /\u003e\n  \u003c/Select\u003e\n)\n\nexport default CustomSelect\n```\n\n## Documentation\n\n- [Select / Select.Async](docs/select.md)\n- [Predefined Components](docs/sub-components.md)\n- [HOC](docs/HOC.md)\n\n## Examples\n\n- [Sync](stories/sync.js)\n- [ASync](stories/async.js)\n- [Fela](stories/fela.js)\n- [Glamorous](stories/glamorous.js)\n- [Styled-components](stories/styled.js)\n\n## Other Solutions\n\n### [Downshift](https://github.com/paypal/downshift)\nThere was no real solution for this problem when I started this project, then [Kent C. Dodds](https://github.com/kentcdodds/) released react-autocompletly (now downshift) that uses the same basic principles and try to solve the same problem.\nI started working on this a bit earlier but I got lazy and put the project aside.\nAnyway, right now his project has far more support so you should consider testing it too. :)\n\n### [React-select](http://jedwatson.github.io/react-select/)\nReact-select is still really good.\n\n## LICENSE\n\nMIT\n\n\n[build-badge]: https://img.shields.io/travis/Kilix/selectless.svg?style=flat-square\n[build]: https://travis-ci.org/Kilix/selectless\n[coverage-badge]: https://img.shields.io/codecov/c/github/Kilix/selectless.svg?style=flat-square\n[coverage]: https://codecov.io/github/Kilix/selectless\n[version-badge]: https://img.shields.io/npm/v/selectless.svg?style=flat-square\n[package]: https://www.npmjs.com/package/selectless\n[license-badge]: https://img.shields.io/npm/l/glamorous.svg?style=flat-square\n[license]: https://github.com/paypal/glamorous/blob/master/LICENSE","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkilix%2Fselectless","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkilix%2Fselectless","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkilix%2Fselectless/lists"}