简体中文

react-ctrl-f

A library that use React to realize the function of Ctrl + F in web version

Usage

``jsx
import {
MatchText,
SearchProvider,
SearchContext,
SearchEventContext,
} from 'react-ctrl-f';
`

$3

- id is required, you need to set a unique ID
- ignorecase is optional, default is true
- case:
`jsx
Hello world
`

$3

- Provide store to search component
`jsx
const { searchValue, activeCount, totalCount } = useContext(SearchContext);
`

$3

- Three events are provided to update store

`jsx
const { onSearchChange, onPrev, onNext } = useContext(SearchEventContext);
`

$3

SearchProvider need to Wrap all SearchContext , SearchEventContext
and MatchText

properties

- value is optional

- value.fixedHeaderHeight is optional, type is number
- value.onScroll is optional, custom onScroll function

- case:

`jsx
import React from 'react';
import { MatchText, SearchProvider } from 'react-ctrl-f';
export default function App() {
const { searchValue, activeCount, totalCount } = useContext(SearchContext);
const { onSearchChange, onPrev, onNext } = useContext(SearchEventContext);
return (

style={{
position: 'fixed',
top: '0px',
left: '0px',
width: '100%',
border: '1px solid green',
}}
>
style={{ width: 200, marginRight: '12px', height: '24px' }}
value={searchValue}
onChange={onSearchChange}
/>
style={{ height: '28px' }}
title='Up'
onClick={() => onPrev(100)}
>
Prev


{activeCount}/{totalCount}

style={{ height: '28px' }}
title='Down'
onClick={() => onNext(100)}
>
Next