https://github.com/kiprasmel/react-selectable-items
render a row of selectable items
https://github.com/kiprasmel/react-selectable-items
component items react selectable
Last synced: 11 months ago
JSON representation
render a row of selectable items
- Host: GitHub
- URL: https://github.com/kiprasmel/react-selectable-items
- Owner: kiprasmel
- License: mit
- Created: 2022-05-25T16:44:19.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-05-31T12:26:50.000Z (over 3 years ago)
- Last Synced: 2024-05-01T15:38:42.667Z (almost 2 years ago)
- Topics: component, items, react, selectable
- Language: TypeScript
- Homepage: http://npm.im/react-selectable-items
- Size: 65.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-selectable-items
render a row of selectable items
## example
create a feedback rating component with stars as the items
```ts
import { SelectableItems, Unselected } from 'react-selectable-items'
type FeedbackRating = Unselected | 1 | 2 | 3 | 4 | 5
export function Stars() {
const [starsSelectedUpUntil, setStarsSelectedUpUntil] = useState(0)
console.log({ starsSelectedUpUntil })
return
count={5}
ItemEmpty={StarEmpty}
ItemSelected={StarFilled}
selectedUpUntil={starsSelectedUpUntil}
setSelectedUpUntil={setStarsSelectedUpUntil}
selectionStrategy="all-before-and-current"
selectionDirection="left-to-right"
/>
}
function StarEmpty() {
return ⭐
}
function StarFilled() {
return 🌠
}
```
### styling
though, we've never actually used this ourselves
```css
.selectable-items__initial-wrapper { }
.selectable-items__item { }
.selectable-items__item--selected { }
.selectable-items__item--not-selected { }
.selectable-items__item--first { }
.selectable-items__item--last { }
```
## example with an error state
you can do all the same, but additionally provide a `Wrapper` prop,
thus overriding our default & very minimal wrapper,
and in your Wrapper you can e.g. show a red border if the field was required but wasn't selected.
```ts
import styled from '@emotion/styled';
export function Stars() {
const [starsSelectedUpUntil, setStarsSelectedUpUntil] = useState(0)
const [hasError, setHasError] = useState(false)
return
count={5}
ItemEmpty={StarEmpty}
ItemSelected={StarFilled}
selectedUpUntil={starsSelectedUpUntil}
setSelectedUpUntil={setStarsSelectedUpUntil}
selectionStrategy="all-before-and-current"
selectionDirection="left-to-right"
Wrapper={({ children }) => (
{children}
)}
/>
}
const ErrorBorderWrapper = styled.div<{ hasError: boolean }>`
display: inline-block;
${({ hasError }) =>
!hasError
? ``
: `
border: 1px solid red;
border-radius: 4px;
`}
`;
```
## License
[MIT](./LICENSE) (c) 2022 Kipras Melnikovas