export function withStyles(Component) {
  return (props) => {
    const style = {
      color: "red",
      fontSize: "1em",
      // Merge props
      ...props.style,
    };

    return <Component {...props} style={style} />;
  };
}

import { withStyles } from "./hoc/withStyles";

const Text = () => <p style={{ fontFamily: "Inter" }}>Hello world!</p>;
const StyledText = withStyles(Text);

In the Higher Order Component Pattern section, the example of withStyles higher order component and Text component. Since withStyles returns a new component with style props, should Text component receive the props.style as well? Otherwise the paragraph style inside Text component won't be updated.

I think the Text component should look like this.

import { withStyles } from "./hoc/withStyles";

const Text = (props) => <p style={{ fontFamily: "Inter", ...props.style }}>Hello world!</p>;
const StyledText = withStyles(Text);

https://javascriptpatterns.vercel.app/patterns/react-patterns/higher-order-component

Can I fork and translate your repo? （English to Chinese）
I think this can help more developers.

Hi
I see extra files counter.js, test1.js, test2.js in module pattern / solution section.
Do we need them there?
Thank you :)

This is not an issue but a question. I love the images and videos used to explain things like in https://javascriptpatterns.vercel.app/patterns/design-patterns/module-pattern. How were these created?

I was trying to open the website but it seems there is problem

please check it out here

There are some typos in
https://github.com/lydiahallie/javascript-react-patterns/blob/main/pages/patterns/design-patterns/factory-pattern.mdx

The fullName method is the same for all the objects that were created. By creating new instances, the fullName method is available on the prototype instead of on the objec, which saves memory.

It should be ... on the prototype instead of on the object....

In this section, the fullName method doesn't exist in the User class. There is the getPosts method instead.

https://javascriptpatterns.vercel.app/patterns/design-patterns/factory-pattern#tradeoffs

can i commit on your repo? for example test files for get pr badge?

https://github.com/lydiahallie/javascript-react-patterns/blob/4ec96d8a6afaa1a8cd1b805cbbeee490f32623b1/pages/patterns/react-patterns/provider-pattern.mdx#L38C1-L38C78

 Before the Context API was available, we often ended up we often end up with
 Before the Context API was available, we often ended up

Caught a small typo while reading:

https://javascriptpatterns.vercel.app/patterns/react-patterns/hooks-pattern#overview

- React Hooks are functions special types of functions that you can use in order to:
+ React Hooks are special types of functions that you can use in order to:

ps - Incredible stuff @lydiahallie thank you for sharing with the community!

As the title suggests, sometimes the timing of page transitions causes the page to scroll to an unintended position.

As shown in the following video, the page will automatically move to the Excercise area instead of the Overview area at the time of page transition.