https://github.com/fabionmoraes/queryparamsuri
Filtro de tabela de pesquisa retorno URL
https://github.com/fabionmoraes/queryparamsuri
angularjs paramaters params query reactjs vuejs
Last synced: 4 months ago
JSON representation
Filtro de tabela de pesquisa retorno URL
- Host: GitHub
- URL: https://github.com/fabionmoraes/queryparamsuri
- Owner: fabionmoraes
- Created: 2022-01-26T21:18:42.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-01-31T13:26:23.000Z (about 4 years ago)
- Last Synced: 2025-06-23T20:55:45.072Z (8 months ago)
- Topics: angularjs, paramaters, params, query, reactjs, vuejs
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/queryparamsuri
- Size: 70.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# queryparamsuri
## O que a lib faz?
A Lib faz filtro de pesquisa com retorno de url para tabelas
## Por que devo usá-lo?
- Retorna de uma forma mais fácil o filtro que você deseja com URL
- Fácil de usar e prático
## Instalação
```bash
yarn add queryparamsuri
# or
npm i queryparamsuri --save
```
## Usage
Suponha que temos uma querystring com um valor de:
``ts
"?page=1&limit=15";
```
```
## Utilização da Library
```ts
import { queryParams, queryURI } from "queryparamsuri";
const App = () => {
const { searchURI, page, limit, query } = queryParams({
params: ['status', 'type'], // adiciona mais query da sua forma
limit: 20, // adiciona o limit de página na URI por default é 15
page: 1, // adiciona a paginação na URI por default é 1
});
//query = { status: '', type: '' } sendo retorno em object
useEffect(() => {
// ... info
}, [searchURI]); // eslint-disable-line
const handlePage = (value: any) => {
const params = queryURI({
name: 'page',
value,
});
//params = ?page=1
// add history.push(params)
};
const handleLimit = (event: SelectChangeEvent) => {
const params = queryURI({
name: 'limit',
value: event.target.value,
});
//params = ?page=1&limit=15
}
const handleSearchObject = (values: any) => {
// example values {
// status: 'ex',
// type: 'ex2
// }
const params = queryObjectURI(values)
// params = ?status=ex&type=ex2
// add history.push(params)
}
return(
//...info
)
}
```
## Exemplo de uso
Utilizando a library QueryParamsUri
Open [use-queryparamsuri-example](https://github.com/fabionmoraes/use-queryparamsuri-example)