0.0.5 • Published 6 years ago
url-context v0.0.5
Url context
Helper utility for managing url params using React context API
Instalation
npm install --save url-context
or
yarn add url-context
Usage
Provider
import urlContext from "url-context";
const {
UrlProvider,
UrlConsumer
} = urlContext();
ReactDOM.render(
<UrlProvider>
<Root />
</UrlProvider>,
document.getElementById("app"),
);
Connect Consumer
const Root = () =>
<UrlConsumer>
{context => (
<App
state={context.state}
addParam={context.addParam}
removeParam={context.removeParam}
/>
)}
</UrlConsumer>
Inside Consumer component you'll have access to props:
state
- object ofkey: value
pairs of params in urladdParam
- function takingkey: string
andvalue> string
to be set in urlremoveParam
- function takingkey: string
of param to be removed from url
const App = (props) =>
<div>
<span>Result: {props.state.number}</span>
<button
onClick={() =>
props.addParam("number", props.state.number + 1)}
>Add 1</button>
<button
onClick={() =>
props.addParam("number", props.state.number - 1)}
>Take 1</button>
<button onClick={() => props.removeParam("number")}>
Remove
</button>
</div>
Examples
For running particular example run one of commands:
yarn example:simple-param