Skip to content

Commit ba44e3e

Browse files
adhamuadhamu
committed
v1.0.0
1 parent 9b88f69 commit ba44e3e

File tree

9 files changed

+57
-51
lines changed

9 files changed

+57
-51
lines changed

‎README.md

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
# React Search Suggestions
1+
# React Input Suggestions
22

33
<div align="center">
4-
<img src="https://raw.githubusercontent.com/adhamu/react-search-suggestions/main/demo.png" alt="demo"/>
4+
<img src="https://raw.githubusercontent.com/adhamu/react-input-suggestions/main/demo.png" alt="demo"/>
55

6-
A React input component with pluggable search suggestions.
6+
A React input component with pluggable search suggestions and autocomplete.
77

88
Also includes arrow key navigation through results.
99

10-
[![Build](https://github.com/adhamu/react-search-suggestions/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/adhamu/react-search-suggestions/actions)
10+
[![Build](https://github.com/adhamu/react-input-suggestions/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/adhamu/react-search-suggestions/actions)
1111

1212
</div>
1313

@@ -18,17 +18,17 @@ Also includes arrow key navigation through results.
1818
## Installation
1919

2020
```shell
21-
yarn add react-search-suggestions
21+
yarn add react-input-suggestions
2222
```
2323

2424
## Usage
2525

2626
```jsx
2727
import React from 'react'
28-
import { SearchSuggestions } from 'react-search-suggestions'
28+
import { InputSuggestions } from 'react-input-suggestions'
2929

3030
const MyComponent = () => (
31-
<SearchSuggestions
31+
<InputSuggestions
3232
autoFocus
3333
suggestions={[
3434
'polite',
@@ -80,14 +80,14 @@ If you wanted to do something else `onClick` or `onKeyDown`, you could do someth
8080

8181
```jsx
8282
import React from 'react'
83-
import { SearchSuggestions } from 'react-search-suggestions'
83+
import { InputSuggestions } from 'react-input-suggestions'
8484

8585
const customFunction = (arg: string) => {
8686
console.log(arg)
8787
}
8888

8989
const MyComponent = () => (
90-
<SearchSuggestions
90+
<InputSuggestions
9191
autoFocus
9292
suggestions={[
9393
'polite',
@@ -119,23 +119,24 @@ export default MyComponent
119119

120120
## Props
121121

122-
| Prop | Description | Type | Default | Required? |
123-
| ------------------- | -------------------------------------------------------------------------------------- | ----------------- | ----------- | --------- |
124-
| `suggestions` | A collection of HTML elements or React components used for search suggestions | React.ReactNode[] | | Y |
125-
| `id` | ID for entire component | string | `undefined` | N |
126-
| `className` | Optional class name to style component | string | `''` | N |
127-
| `name` | Input name | string | `'q'` | N |
128-
| `placeholder` | Input placeholder | string | `'Search'` | N |
129-
| `autoFocus` | Input autoFocus | boolean | `false` | N |
130-
| `onChange` | Input onChange handler | function | `undefined` | N |
131-
| `withStyles` | Basic styling for the component | boolean | `false` | N |
132-
| `highlightKeywords` | Highlight letters that match search term by wrapping a `<mark>` tag around suggestions | boolean | `false` | N |
122+
| Prop | Description | Type | Default | Required? |
123+
| ------------------- | -------------------------------------------------------------------------------------- | ------------------ | ----------- | --------- |
124+
| `suggestions` | A collection of HTML elements or React components used for search suggestions | React.ReactNode[] | | Y |
125+
| `id` | ID for entire component | string | `undefined` | N |
126+
| `type` | Input type | 'search' \| 'text' | `search` | N |
127+
| `className` | Optional class name to style component | string | `''` | N |
128+
| `name` | Input name | string | `'q'` | N |
129+
| `placeholder` | Input placeholder | string | `'Search'` | N |
130+
| `autoFocus` | Input autoFocus | boolean | `false` | N |
131+
| `onChange` | Input onChange handler | function | `undefined` | N |
132+
| `withStyles` | Basic styling for the component | boolean | `false` | N |
133+
| `highlightKeywords` | Highlight letters that match search term by wrapping a `<mark>` tag around suggestions | boolean | `false` | N |
133134

134135
## Styling
135136

136137
By default, the component comes with almost no styles. Given the semantic nature of the markup, it is quite easy to target these with CSS. As mentioned above, you can provide a `className` to the component for this.
137138

138-
Alternatively, you can set the `withStyles` prop to `true` to achieve some very basic styling. An example of this can be seen on [GitHub Pages](http://adhamu.github.io/react-search-suggestions/).
139+
Alternatively, you can set the `withStyles` prop to `true` to achieve some very basic styling. An example of this can be seen on [GitHub Pages](http://adhamu.github.io/react-input-suggestions/).
139140

140141
**Important**: The `:focus` attribute on each top level element's search suggestion is what powers the active state of a selected element. Refer to the [HTML Structure](#html-structure) above to correctly determine any CSS selectors.
141142

‎package.json

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
{
2-
"name": "react-search-suggestions",
2+
"name": "react-input-suggestions",
33
"version": "1.0.0",
4-
"description": "A React input component with pluggable search suggestions.",
4+
"description": "A React input component with pluggable suggestions and autocomplete",
55
"keywords": [
66
"react",
7-
"autcomplete",
7+
"autocomplete",
88
"search",
99
"suggestions",
1010
"typescript",
1111
"arrow key navigation",
12-
"esbuild"
12+
"esbuild",
13+
"input"
1314
],
1415
"repository": {
1516
"type": "git",
16-
"url": "https://github.com/adhamu/react-search-suggestions"
17+
"url": "https://github.com/adhamu/react-input-suggestions"
1718
},
1819
"license": "MIT",
1920
"author": "Amit Dhamu <[email protected]>",

‎public/index.html

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<html lang="en">
33

44
<head>
5-
<title>React Search Suggestions</title>
5+
<title>React Input Suggestions</title>
66
<meta charset="utf-8" />
7-
<meta name="description" content="React Search Suggestions" />
7+
<meta name="description" content="React Input Suggestions" />
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
99
<link rel="preconnect" href="https://fonts.gstatic.com" />
1010
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet" />
@@ -21,10 +21,6 @@
2121
margin-bottom: 1.5rem;
2222
}
2323

24-
.searchSuggestions ul {
25-
top: calc(100% - 3px);
26-
}
27-
2824
mark {
2925
background: transparent;
3026
font-weight: bold;
@@ -34,7 +30,7 @@
3430
</head>
3531

3632
<body>
37-
<h1>React Search Suggestions</h1>
33+
<h1>React Input Suggestions</h1>
3834
<main id="app"></main>
3935
<script type="module" src="./script.js"></script>
4036
</body>

‎src/SearchSuggestions.tsx renamed to ‎src/InputSuggestions.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@ import { getElementText, wrapElementText } from './elementText'
66
import { Styled } from './styled'
77
import { useSuggestions } from './useSuggestions'
88

9-
const SearchSuggestions = ({
9+
const InputSuggestions = ({
1010
suggestions,
11+
type = 'search',
1112
name = 'q',
1213
placeholder = 'Search',
1314
autoFocus = false,
@@ -37,7 +38,7 @@ const SearchSuggestions = ({
3738
<Styled id={id} className={className} withTheme={withTheme}>
3839
<input
3940
ref={inputSearchRef}
40-
type="search"
41+
type={type}
4142
name={name}
4243
placeholder={placeholder}
4344
autoFocus={autoFocus}
@@ -76,4 +77,4 @@ const SearchSuggestions = ({
7677
)
7778
}
7879

79-
export default SearchSuggestions
80+
export default InputSuggestions

‎src/__tests__/SearchSuggestions.test.tsx renamed to ‎src/__tests__/InputSuggestions.test.tsx

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react'
33
import { render, screen } from '@testing-library/react'
44
import userEvent from '@testing-library/user-event'
55

6-
import SearchSuggestions from '../SearchSuggestions'
6+
import InputSuggestions from '../InputSuggestions'
77
import * as elementText from '../elementText'
88

99
const suggestions = ['reddit', 'facebook', 'twitter'].map(word => (
@@ -12,15 +12,15 @@ const suggestions = ['reddit', 'facebook', 'twitter'].map(word => (
1212
</a>
1313
))
1414

15-
describe('SearchSuggestions', () => {
15+
describe('InputSuggestions', () => {
1616
const mockGetElementText = jest.spyOn(elementText, 'getElementText')
1717
const mockWrapElementText = jest.spyOn(elementText, 'wrapElementText')
1818

1919
beforeEach(jest.clearAllMocks)
2020

2121
describe('renders correctly with default options', () => {
2222
beforeEach(() => {
23-
render(<SearchSuggestions suggestions={suggestions} />)
23+
render(<InputSuggestions suggestions={suggestions} />)
2424
})
2525

2626
it('has the correct type', () => {
@@ -75,15 +75,21 @@ describe('SearchSuggestions', () => {
7575
})
7676

7777
describe('renders correctly with custom options', () => {
78+
it('has the correct type', () => {
79+
render(<InputSuggestions suggestions={suggestions} type="text" />)
80+
81+
expect(screen.getByRole('textbox')).toHaveAttribute('type', 'text')
82+
})
83+
7884
it('sets the name attribute', () => {
79-
render(<SearchSuggestions suggestions={suggestions} name="search" />)
85+
render(<InputSuggestions suggestions={suggestions} name="search" />)
8086

8187
expect(screen.getByRole('searchbox')).toHaveAttribute('name', 'search')
8288
})
8389

8490
it('sets the placeholder attribute', () => {
8591
render(
86-
<SearchSuggestions
92+
<InputSuggestions
8793
suggestions={suggestions}
8894
placeholder="Enter keywords"
8995
/>
@@ -96,14 +102,14 @@ describe('SearchSuggestions', () => {
96102
})
97103

98104
it('sets autoFocus', () => {
99-
render(<SearchSuggestions suggestions={suggestions} autoFocus />)
105+
render(<InputSuggestions suggestions={suggestions} autoFocus />)
100106

101107
expect(screen.getByRole('searchbox')).toHaveFocus()
102108
})
103109

104110
it('sets an ID', () => {
105111
const { container } = render(
106-
<SearchSuggestions suggestions={suggestions} id="react-search" />
112+
<InputSuggestions suggestions={suggestions} id="react-search" />
107113
)
108114

109115
// eslint-disable-next-line testing-library/no-node-access
@@ -112,15 +118,15 @@ describe('SearchSuggestions', () => {
112118

113119
it('sets a className', () => {
114120
const { container } = render(
115-
<SearchSuggestions suggestions={suggestions} className="react-search" />
121+
<InputSuggestions suggestions={suggestions} className="react-search" />
116122
)
117123

118124
// eslint-disable-next-line testing-library/no-node-access
119125
expect(container.firstChild).toHaveClass('react-search')
120126
})
121127

122128
it('calls wrapElementText when highlightKeywords provided', () => {
123-
render(<SearchSuggestions suggestions={suggestions} highlightKeywords />)
129+
render(<InputSuggestions suggestions={suggestions} highlightKeywords />)
124130

125131
userEvent.type(screen.getByRole('searchbox'), 't')
126132

@@ -132,7 +138,7 @@ describe('SearchSuggestions', () => {
132138
const mockOnChange = jest.fn()
133139

134140
render(
135-
<SearchSuggestions suggestions={suggestions} onChange={mockOnChange} />
141+
<InputSuggestions suggestions={suggestions} onChange={mockOnChange} />
136142
)
137143

138144
expect(mockOnChange).not.toHaveBeenCalled()
@@ -144,7 +150,7 @@ describe('SearchSuggestions', () => {
144150
})
145151

146152
it('shows filtered search suggestions based on input entered', () => {
147-
render(<SearchSuggestions suggestions={suggestions} />)
153+
render(<InputSuggestions suggestions={suggestions} />)
148154

149155
expect(screen.queryByRole('list')).not.toBeInTheDocument()
150156

‎src/__tests__/styled.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { render } from '@testing-library/react'
44

55
import { Styled } from '../styled'
66

7-
describe('Search Suggestion Styles', () => {
7+
describe('Input Suggestion Styles', () => {
88
it('has the correct styles without theme', () => {
99
const { container } = render(<Styled>Hello world</Styled>)
1010

‎src/example/App.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22

3-
import { SearchSuggestions } from '..'
3+
import { InputSuggestions } from '..'
44

55
const suggestions = [
66
'polite',
@@ -60,7 +60,7 @@ const suggestions = [
6060
))
6161

6262
const App = (): JSX.Element => (
63-
<SearchSuggestions
63+
<InputSuggestions
6464
suggestions={suggestions}
6565
autoFocus
6666
withTheme

‎src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
export type { Props } from './types'
22
export { useSuggestions } from './useSuggestions'
3-
export { default as SearchSuggestions } from './SearchSuggestions'
3+
export { default as InputSuggestions } from './InputSuggestions'

‎src/types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import type React from 'react'
22

33
export type Props = {
44
id?: string
5+
type?: 'search' | 'text'
56
suggestions: React.ReactNode[]
67
className?: string
78
name?: string

0 commit comments

Comments
 (0)