Commit 6666e0a

committed

update examples

1 parent 768e733 commit 6666e0aCopy full SHA for 6666e0a

File tree

+27

-49

lines changed

+27

-49

lines changed

Lines changed: 0 additions & 37 deletions

This file was deleted.

Lines changed: 5 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,7 @@`
	`1`	+#### `outline` theme + Dynamic suggestion list
	`2`	`+`
	`3`	`+##### Type A\|B\|C\|D\|Item to see the suggestion list`
	`4`	`+`
`1`	`5`	```jsx
`2`	`6`	`import React, {useState} from 'react';`
`3`	`7`	`import ReactCustomSearchList from 'react-custom-search-list';`
`@@ -13,6 +17,7 @@ function App() {`
`13`	`17`	`onChange={(e) => setValue(e.target.value)}`
`14`	`18`	`onClear={() => setValue('')}`
`15`	`19`	`fullWidth`
	`20`	`+ theme="outline"`
`16`	`21`	`corner>`
`17`	`22`	`{/*Render your suggestions list here/}`
`18`	`23`	`{value`

Lines changed: 2 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	+#### `panel` theme + Constant suggestion list
	`2`	`+`
`1`	`3`	```jsx
`2`	`4`	`import React, {useState} from 'react';`
`3`	`5`	`import ReactCustomSearchList from 'react-custom-search-list';`

Lines changed: 20 additions & 12 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,10 +1,9 @@`
	`1`	+#### `underline` theme + Constant suggestion list
	`2`	`+`
`1`	`3`	```jsx
`2`	`4`	`import React, {useState} from 'react';`
`3`	`5`	`import ReactCustomSearchList from 'react-custom-search-list';`
`4`	`6`	`import 'react-custom-search-list/style/react-custom-search-list.css';`
`5`		`-`
`6`		`-const items = ['Item A', 'Item B', 'Item C', 'Item D'];`
`7`		`-`
`8`	`7`	`function App() {`
`9`	`8`	`const [value, setValue] = useState('');`
`10`	`9`	`return (`
`@@ -16,15 +15,24 @@ function App() {`
`16`	`15`	`fullWidth`
`17`	`16`	`corner>`
`18`	`17`	`{/*Render your suggestions list here/}`
`19`		`- {value`
`20`		`- ? items`
`21`		`- .filter((item) => item.toLowerCase().includes(value.toLowerCase()))`
`22`		`- .map((item) => (`
`23`		`- <div key={item} style={{margin: '5px'}}>`
`24`		`- <p onClick={() => setValue(item)}>{item}</p>`
`25`		`- </div>`
`26`		`- ))`
`27`		`- : null}`
	`18`	`+ <ul>`
	`19`	`+ <li>`
	`20`	`+ <button onClick={() => setValue('Option A')}>Option A</button>`
	`21`	`+ </li>`
	`22`	`+ <li>`
	`23`	`+ <button onClick={() => setValue('Option B')}>Option B</button>`
	`24`	`+ </li>`
	`25`	`+ <li>`
	`26`	`+ <a href="https://github.com/dev-javascript/react-custom-search-list" target="_blank">`
	`27`	`+ Github Link`
	`28`	`+ </a>`
	`29`	`+ </li>`
	`30`	`+ <li>`
	`31`	`+ <a href="https://www.npmjs.com/package/react-custom-search-list" target="_blank">`
	`32`	`+ NPM Link`
	`33`	`+ </a>`
	`34`	`+ </li>`
	`35`	`+ </ul>`
`28`	`36`	`</ReactCustomSearchList>`
`29`	`37`	`);`
`30`	`38`	`}`

Comments

(0)