Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
Sign In

wouter

Package Overview
Dependencies
Maintainers
1
Versions
97
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

wouter - npm Package Compare versions

Comparing version
3.0.2
 to
3.1.0-dev.6815e69
+22
-13
esm/index.js

@@ -131,2 +131,6 @@ import { parse } from 'regexparam';

// when `ssrPath` contains a `?` character, we can extract the search from it
const [path, search] = props.ssrPath?.split("?") ?? [];
if (search) (props.ssrSearch = search), (props.ssrPath = path);
// what is happening below: to avoid unnecessary rerenders in child components,

@@ -194,3 +198,3 @@ // we ensure that the router object reference is stable, unless there are any

const router = useRouter();
const [, navigate] = useLocationFromRouter(router);
const [path, navigate] = useLocationFromRouter(router);

@@ -203,2 +207,3 @@ const {

children,
className: cls,
/* eslint-disable no-unused-vars */

@@ -208,2 +213,3 @@ replace /* ignore nav props */,

/* eslint-enable no-unused-vars */
...restProps

@@ -224,3 +230,3 @@ } = props;

_onClick && _onClick(event); // TODO: is it safe to use _onClick?.(event)
_onClick?.(event);
if (!event.defaultPrevented) {

@@ -236,17 +242,20 @@ event.preventDefault();

return asChild && isValidElement(children)
? cloneElement(children, { href, onClick })
: createElement("a", { ...restProps, href, onClick, children, ref });
? cloneElement(children, { onClick, href })
: createElement("a", {
...restProps,
onClick,
href,
// `className` can be a function to apply the class if this link is active
className: cls?.call ? cls(path === href) : cls,
children,
ref,
});
});
const flattenChildren = (children) => {
return Array.isArray(children)
? [].concat(
...children.map((c) =>
c && c.type === Fragment
? flattenChildren(c.props.children)
: flattenChildren(c)
)
const flattenChildren = (children) =>
Array.isArray(children)
? children.flatMap((c) =>
flattenChildren(c && c.type === Fragment ? c.props.children : c)
)
: [children];
};

@@ -253,0 +262,0 @@ const Switch = ({ children, location }) => {

+1
-1
package.json
{
"name": "wouter",
"version": "3.0.2",
"version": "3.1.0-dev.6815e69",
"description": "Minimalist-friendly ~1.5KB router for React",

@@ -5,0 +5,0 @@ "type": "module",

+26
-8
README.md

@@ -455,4 +455,10 @@ <div align="center">

Active links are not yet shipped out-of-the-box, but you can easily [implement them](#how-do-i-make-a-link-active-for-the-current-route) using `useLocation`.
When you pass a function as a `className` prop, it will be called with a boolean value indicating whether the link is active for the current route. You can use this to style active links (e.g. for links in navigation menu)
```jsx
<Link className={(active) => (active ? "active" : "")}>Nav</Link>
```
Read more about [active links here](#how-do-i-make-a-link-active-for-the-current-route).
### `<Switch />`

@@ -619,8 +625,11 @@

There are cases when you need to highlight an active link, for example, in the navigation bar. While
this functionality isn't provided out-of-the-box, you can easily write your own `<Link />` wrapper
and detect if the path is active by using the `useRoute` hook. The `useRoute(pattern)` hook returns
a pair of `[match, params]`, where `match` is a boolean value that tells if the pattern matches
current location:
Instead of a regular `className` string, provide a function to use custom class when this link matches the current route. Note that it will always perform an exact match (i.e. `/users` will not be active for `/users/1`).
```jsx
<Link className={(active) => (active ? "active" : "")}>Nav link</Link>
```
If you need to control other props, such as `aria-current` or `style`, you can write your own `<Link />` wrapper
and detect if the path is active by using the `useRoute` hook.
```js

@@ -630,4 +639,4 @@ const [isActive] = useRoute(props.href);

return (
<Link {...props}>
<a className={isActive ? "active" : ""}>{props.children}</a>
<Link {...props} asChild>
<a style={isActive ? { color: "red" } : {}}>{props.children}</a>
</Link>

@@ -794,2 +803,11 @@ );

Tip: wouter can pre-fill `ssrSearch`, if `ssrPath` contains the `?` character. So these are equivalent:
```jsx
<Router ssrPath="/goods?sort=asc" />;
// is the same as
<Router ssrPath="/goods" ssrSearch="sort=asc" />;
```
On the client, the static markup must be hydrated in order for your app to become interactive. Note

@@ -796,0 +814,0 @@ that to avoid having hydration warnings, the JSX rendered on the client must match the one used by

+8
-1
types/index.d.ts

@@ -106,2 +106,9 @@ // Minimum TypeScript Version: 4.1

type HTMLLinkAttributes = Omit<
AnchorHTMLAttributes<HTMLAnchorElement>,
"className"
> & {
className?: string | undefined | ((isActive: boolean) => string | undefined);
};
export type LinkProps<H extends BaseLocationHook = BrowserLocationHook> =

@@ -111,3 +118,3 @@ NavigationalProps<H> &

{ children: ReactElement; onClick?: MouseEventHandler },
AnchorHTMLAttributes<HTMLAnchorElement> & RefAttributes<HTMLAnchorElement>
HTMLLinkAttributes & RefAttributes<HTMLAnchorElement>
>;

@@ -114,0 +121,0 @@