Biblioteca JavaScript para pesquisa rápida de páginas em sua aplicação.
npm install reachjs html
`
Ou pode também fazer o download via NPM ou Yarn.
` bash
npm install --save reachjs
yarn add reachjs
`
E importa-lo nos arquivos .js utilizando webpack ou browserify por exemplo.
` javascript
import reachjs from 'reachjs';
// ou
var reachjs = require('reachjs');
`
Utilização
Para inicializar a biblioteca, o único parâmetro obrigatório são as rotas disponíveis da sua aplicação. As demais configurações têm seus valores padrões caso você não queira customizá-los.
$3
O parâmetro de rotas pode ser passado tanto como um array de items como uma URL para serem resgatadas.
Para carregar como um array de items é necessário passar a chave routes no objeto de inicialização.
` javascript
import reachjs from 'reachjs';
reachjs.init({
routes: [{
title: 'Home',
path: 'home',
description: 'Página principal do sistema',
}, {
title: 'Quem Somos',
path: '/quem_somos',
description: 'Nós somos o que está nessa pequena descrição aqui',
}, {
title: 'Contato',
path: 'contato',
description: 'Nós temos várias formas de contato e estamos localizados nesse lugar aqui bem bacana :)',
}]
});
`
Ou utilizar o método setRoutes exposto pela biblioteca.
` javascript
import reachjs from 'reachjs';
reachjs.setRoutes([ ... ]); // mesmo array do exemplo anterior
reachjs.init();
`
Para carregar os items por uma URL é necessário passar a chave routesUrl no objeto de inicialização.
` javascript
import reachjs from 'reachjs';
reachjs.init({
routesUrl: 'http://app.minhaaplicacao.com.br/sistema/rotas'
});
`
Ou utilizar o método setRoutesUrl exposto pela biblioteca.
` javascript
import reachjs from 'reachjs';
reachjs.setRoutesUrl('http://app.minhaaplicacao.com.br/sistema/rotas');
reachjs.init();
`
Para configurações especiais na url de rotas você pode utilizar a chave routesConfig no objeto de inicialização. As alterações que podem ser feitas são:
* Parâmetro de pesquisa da URL (searchQueryParam), que por padrão é q
* Headers diferentes na requisição (customHeader)
` javascript
import reachjs from 'reachjs';
reachjs.init({
routesConfig: {
searchQueryParam: 'search',
customHeader: {
Authorization: 'UmVhY2hKUw=='
}
}
});
`
Ou utilizar o método setRoutesConfig exposto pela biblioteca.
` javascript
import reachjs from 'reachjs';
reachjs.setRoutesConfig({
searchQueryParam: 'search',
customHeader: {
Authorization: 'UmVhY2hKUw=='
}
});
reachjs.init();
`
$3
Os idiomas com suporte são:
* Português (pt)
* Inglês (us)
O idioma padrão é o português.
Para selecionar um idioma diferente é necessário passar a chave locale no objeto de inicialização.
` javascript
import reachjs from 'reachjs';
reachjs.init({
locale: 'us'
});
`
Ou utilizar o método setLocale exposto pela biblioteca.
` javascript
import reachjs from 'reachjs';
reachjs.setLocale('us');
reachjs.init();
`
$3
Você pode customizar as teclas que irão fazer o ReachJS aparecer na tela. É obrigatório passar 2 teclas, sendo que a primeira tecla deverá obrigatoriamente ficar pressionada e a segunda ser apertada durante o pressionamento da primeira tecla.
As teclas padrões são CTRL + SPACEBAR e seus respectivos keyCodes são 17 e 32.
Para utilizar teclas de disparo diferentes é necessário passar a chave openKeys no objeto de inicialização.
` javascript
import reachjs from 'reachjs';
reachjs.init({
openKeys: [16, 18] // SHIFT + ALT
});
`
Ou utilizar o método setOpenKeys exposto pela biblioteca.
` javascript
import reachjs from 'reachjs';
reachjs.setOpenKeys([16, 18]);
reachjs.init();
`
OBS.: Essa configuração aceita apenas o keyCode das teclas. Os keyCodes podem ser encontrados neste link.
$3
Você pode customizar o evento que é disparado sempre que o usuário escolher um dos items pesquisado.
Por padrão o ReachJS vai apenas redirecionar o usuário para o parâmetro path passado no objeto da rota selecionada.
Para disparar um evento diferente é necessário passar a chave onSelect no objeto de inicialização.
` javascript
import reachjs from 'reachjs';
reachjs.init({
onSelect: data => {
alert(Você será redirecionado para a página ${data.title}.);
window.location = data.path;
}
});
`
Ou utilizar o método setOnSelect exposto pela biblioteca.
` javascript
import reachjs from 'reachjs';
reachjs.setOnSelect(data => {
// ...
}));
reachjs.init();
``