New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Warning: componentWillMount has been renamed — SideEffect(DocumentTitle) #62
Comments
We had not merged the pull request, because of problems in react-document-title there is not lite way to replace componentWillMount → componentDidMount here. more info: gaearon/react-side-effect#40 (comment) |
Interested by this too. |
Just use hooks.
|
need upgrade this package? |
@mmakarin this will not actually reset the title, because
|
So your solution works @Hypnosphi solution is on my branch (ignore the tests, they're broken for the reason following) https://github.com/erindepew/react-document-title/tree/convert-to-hooks the only problem is that it seems to also require a change for withSideEffect https://github.com/gaearon/react-side-effect in order to get the .rewind() and .peek(), and I'm not sure there's a way to do that without componentWillMount. Thoughts? |
One issue with the hooks approach is that nested components don't take precedence over their parents: https://codesandbox.io/s/interesting-bartik-stwys (see useDocumentTitle.ts and useDocumentTitle.test.tsx) Given that children are mounted before parents I'm not really sure what the best approach to solving this would be. Especially tricky when you consider sibling components as well and determining which should take precedence Edit: I think I might just be re-stating what @erindepew said above |
Great point, completely forgot about that as well. So seems like refactoring to hooks isn't really an option for this component. |
Yeah I think essentially the heavy lifting here is handled by react-side-effect, and react-side-effect depends on componentWillMount. The issue for that is here: gaearon/react-side-effect#54 Dan stated in that issue that react-side-effect doesn't really make sense to him anymore and that a more modern approach might be to use context. It looks like react-helmet-async is doing just that, so maybe that's the way to go. |
What's needed to make this happen? Does a solution need to be picked by the maintainers (it seems like context is the way to go?) Is a PR needed? The last comment here is from 2019; how can we make this happen in 2020? |
Please, fix this issue |
I think you should use https://github.com/staylor/react-helmet-async instead. <HelmetProvider>
<App>
<Helmet>
<title>Hello World</title>
</Helmet>
<h1>Hello World</h1>
</App>
</HelmetProvider> |
Seeing as the last release is back in 12 Apr 2017, I just had to solve this for myself and ended up using // custom-document-title.tsx
import React from "react";
import Helmet from "react-helmet";
export type IDocumentTitleProps = {
title?: string;
children?: React.ReactElement;
};
export function DocumentTitle(props: IDocumentTitleProps) {
const { title, children } = props;
return (
<>
<Helmet>
<title>{title}</title>
</Helmet>
{children}
</>
);
}
export default DocumentTitle; Usage, exactly the same as import DocumentTitle from "./custom-document-title"
<DocumentTitle title="My Title"> |
@ptboyer I believe your solution will still generate a warning, because import React from 'react';
import { Helmet } from 'react-helmet-async';
interface Props {
children?: React.ReactNode;
title: string;
}
export const DocumentTitle = ({ children, title }: Props) =>
<>
<Helmet>
<title>{title}</title>
</Helmet>
{children}
</>; Note: We don't use default exports in our project. You'll still need to setup the |
If anyone is looking for a short hook solution that matches this package behavior, this should do it: import React from 'react';
const DEFAULT_PAGE_TITLE = 'My Website';
const DocumentTitleContext = React.createContext(DEFAULT_PAGE_TITLE);
/**
* Update the page title with the given prop
* NOTE: We use a context so that we can restore the title to whichever value is specified by the nearest parent
*/
export const DocumentTitle = ({
title,
children,
}: {
title: string;
children: React.ReactNode;
}) => {
const parentTitle = React.useContext(DocumentTitleContext);
React.useEffect(() => {
document.title = title;
return () => {
document.title = parentTitle;
};
}, [title, parentTitle]);
return <DocumentTitleContext.Provider value={title}>{children}</DocumentTitleContext.Provider>;
}; Previous solutions that snapshot the title in |
@gaelduplessix maybe i am missing something, but with your solution, if you nest several
final |
react 16.9.0+ compat
The text was updated successfully, but these errors were encountered: