A document head manager for React

Overview

React Helmet

npm Version codecov.io Build Status Dependency Status PRs Welcome

This reusable React component will manage all of your changes to the document head.

Helmet takes plain HTML tags and outputs plain HTML tags. It's dead simple, and React beginner friendly.

6.1.0 Major Changes

Example

import React from "react";
import {Helmet} from "react-helmet";

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
                <link rel="canonical" href="http://mysite.com/example" />
            </Helmet>
            ...
        </div>
    );
  }
};

Nested or latter components will override duplicate changes:

<Parent>
    <Helmet>
        <title>My Title</title>
        <meta name="description" content="Helmet application" />
    </Helmet>

    <Child>
        <Helmet>
            <title>Nested Title</title>
            <meta name="description" content="Nested component" />
        </Helmet>
    </Child>
</Parent>

outputs:

<head>
    <title>Nested Title</title>
    <meta name="description" content="Nested component">
</head>

See below for a full reference guide.

Features

  • Supports all valid head tags: title, base, meta, link, script, noscript, and style tags.
  • Supports attributes for body, html and title tags.
  • Supports server-side rendering.
  • Nested components override duplicate head changes.
  • Duplicate head changes are preserved when specified in the same component (support for tags like "apple-touch-icon").
  • Callback for tracking DOM changes.

Compatibility

Helmet 5 is fully backward-compatible with previous Helmet releases, so you can upgrade at any time without fear of breaking changes. We encourage you to update your code to our more semantic API, but please feel free to do so at your own pace.

Installation

Yarn:

yarn add react-helmet

npm:

npm install --save react-helmet

Server Usage

To use on the server, call Helmet.renderStatic() after ReactDOMServer.renderToString or ReactDOMServer.renderToStaticMarkup to get the head data for use in your prerender.

Because this component keeps track of mounted instances, you have to make sure to call renderStatic on server, or you'll get a memory leak.

ReactDOMServer.renderToString(<Handler />);
const helmet = Helmet.renderStatic();

This helmet instance contains the following properties:

  • base
  • bodyAttributes
  • htmlAttributes
  • link
  • meta
  • noscript
  • script
  • style
  • title

Each property contains toComponent() and toString() methods. Use whichever is appropriate for your environment. For attributes, use the JSX spread operator on the object returned by toComponent(). E.g:

As string output

const html = `
    <!doctype html>
    <html ${helmet.htmlAttributes.toString()}>
        <head>
            ${helmet.title.toString()}
            ${helmet.meta.toString()}
            ${helmet.link.toString()}
        </head>
        <body ${helmet.bodyAttributes.toString()}>
            <div id="content">
                // React stuff here
            </div>
        </body>
    </html>
`;

As React components

function HTML () {
    const htmlAttrs = helmet.htmlAttributes.toComponent();
    const bodyAttrs = helmet.bodyAttributes.toComponent();

    return (
        <html {...htmlAttrs}>
            <head>
                {helmet.title.toComponent()}
                {helmet.meta.toComponent()}
                {helmet.link.toComponent()}
            </head>
            <body {...bodyAttrs}>
                <div id="content">
                    // React stuff here
                </div>
            </body>
        </html>
    );
}

Note: Use the same instance

If you are using a prebuilt compilation of your app with webpack in the server be sure to include this in the webpack file so that the same instance of react-helmet is used.

externals: ["react-helmet"],

Or to import the react-helmet instance from the app on the server.

Reference Guide

<Helmet
    {/* (optional) set to false to disable string encoding (server-only) */}
    encodeSpecialCharacters={true}

    {/*
        (optional) Useful when you want titles to inherit from a template:

        <Helmet
            titleTemplate="%s | MyAwesomeWebsite.com"
        >
            <title>Nested Title</title>
        </Helmet>

        outputs:

        <head>
            <title>Nested Title | MyAwesomeWebsite.com</title>
        </head>
    */}
    titleTemplate="MySite.com - %s"

    {/*
        (optional) used as a fallback when a template exists but a title is not defined

        <Helmet
            defaultTitle="My Site"
            titleTemplate="My Site - %s"
        />

        outputs:

        <head>
            <title>My Site</title>
        </head>
    */}
    defaultTitle="My Default Title"
    
    {/* (optional) set to false to not use requestAnimationFrame and instead update the DOM as soon as possible.
        Useful if you want to update the title when the tab is out of focus 
    */}
    defer={false}

    {/* (optional) callback that tracks DOM changes */}
    onChangeClientState={(newState, addedTags, removedTags) => console.log(newState, addedTags, removedTags)}
>
    {/* html attributes */}
    <html lang="en" amp />

    {/* body attributes */}
    <body className="root" />

    {/* title attributes and value */}
    <title itemProp="name" lang="en">My Plain Title or {`dynamic`} title</title>

    {/* base element */}
    <base target="_blank" href="http://mysite.com/" />

    {/* multiple meta elements */}
    <meta name="description" content="Helmet application" />
    <meta property="og:type" content="article" />

    {/* multiple link elements */}
    <link rel="canonical" href="http://mysite.com/example" />
    <link rel="apple-touch-icon" href="http://mysite.com/img/apple-touch-icon-57x57.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="http://mysite.com/img/apple-touch-icon-72x72.png" />
    {locales.map((locale) => {
        <link rel="alternate" href="http://example.com/{locale}" hrefLang={locale} key={locale}/>
    })}

    {/* multiple script elements */}
    <script src="http://include.com/pathtojs.js" type="text/javascript" />

    {/* inline script elements */}
    <script type="application/ld+json">{`
        {
            "@context": "http://schema.org"
        }
    `}</script>

    {/* noscript elements */}
    <noscript>{`
        <link rel="stylesheet" type="text/css" href="foo.css" />
    `}</noscript>

    {/* inline style elements */}
    <style type="text/css">{`
        body {
            background-color: blue;
        }

        p {
            font-size: 12px;
        }
    `}</style>
</Helmet>

Contributing to this project

Please take a moment to review the guidelines for contributing.

License

MIT

Comments
  • Incompatible with StrictMode

    Incompatible with StrictMode

    When use inside <StrictMode> I got this error

    Warning: Unsafe lifecycle methods were found within a strict-mode tree:
    
    componentWillMount: Please update the following components to use componentDidMount instead: SideEffect(NullComponent)
    

    Here is reproducible example https://github.com/stereobooster/react-lingui-example/pull/3/files

    <ConcurrentMode><App /></ConcurrentMode> forces StrictMode check.

    Related https://github.com/gaearon/react-side-effect/issues/40

    enhancement help wanted 
    opened by stereobooster 49
  • Uncaught RangeError: Maximum call stack size exceeded

    Uncaught RangeError: Maximum call stack size exceeded

    screenshot 2018-05-03 15 37 05

    Hey, HelmetWrapper uses deepEqual to compare props and of course, there are react children components with endless amount of nested objects. This seems like a dangerous way to check props equality. Could we turn HelmetWrapper into PureComponent?

    opened by dmitriykharchenko 45
  • Throws warnings in React 16.9 and will not work with React 17

    Throws warnings in React 16.9 and will not work with React 17

    Do you want to request a feature or report a bug? Bug

    What is the current behavior? Throws warnings with React 16.9+ and will not work with React 17.

    If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React and react-helmet. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

    What is the expected behavior? No warnings and should work.

    Which versions of React and react-helmet, and which browser / OS are affected by this issue? Did this work in previous versions of React and/or react-helmet? React 16.9+, any version of react-helmet, any browser/os.

    Here is the warning thrown now:

    Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

    • Move code with side effects to componentDidMount, and set initial state in the constructor.
    • Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

    Please update the following components: SideEffect(DocumentTitle)

    opened by mikecousins 25
  • is it possible to use react-helmet for not a server rendering react app?

    is it possible to use react-helmet for not a server rendering react app?

    I have a react app that I build using https://github.com/facebookincubator/create-react-app

    but I cant find a the way of setting the meta using react-helmet.

    is it possible to use react-helmet for not a server rendering react app?

    opened by bitcoinvsalts 25
  • Broken export when using Webpack 2 (React.createElement: type should not be null)

    Broken export when using Webpack 2 (React.createElement: type should not be null)

    In 3.1.0 the export is not broken: typeof require('react-helmet') === 'function'. In 3.2.0 it is broken: typeof require('react-helmet') === 'object'. The error is "Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of Layout." The cause is that v3.2.x of ReactHelmet is { default: function ReactHelmet() {} } when imported in Webpack 2.

    opened by catamphetamine 25
  • deep-equal crashes on newer React?

    deep-equal crashes on newer React?

    I've experienced some call-too-deep errors, and I think somehow React is introducing circular references and then deep-equal follows them.

    I worked around this like so:

    import {isEqual} from 'lodash'
    
    // Helmet uses deep-equal and sometimes crashes on circular objects
    Helmet.prototype.shouldComponentUpdate = function(nextProps) {
    	return !isEqual(this.props, nextProps)
    }
    

    It seems to work - lodash has circular reference protection.

    opened by wmertens 22
  • Why does Helmet recreate server rendered tags when it loads?

    Why does Helmet recreate server rendered tags when it loads?

    Per the source here https://github.com/nfl/react-helmet/blob/master/src/Helmet.js#L197 I can see that Helmet blows away managed tags and re-adds them. Why does it do this? It leads to problems like this one http://stackoverflow.com/questions/37355346/script-tag-runs-twice-in-universal-react-application-fb-plugin/37555818#37555818 which is a problem that also affects me.

    I'd be happy to submit a pull to change this behaviour, but thought perhaps there was a good reason. Thanks!

    bug 
    opened by henrybaxter 22
  • Using `react-router@2.0.1`, `Helmet.rewind()` doesn't give the expected results

    Using `[email protected]`, `Helmet.rewind()` doesn't give the expected results

    In the following snippet, when rendering on the server:

    let rendered = ReactDomServer.renderToStaticMarkup(
            <RouterContext {...renderProps} />);
    let head = Helmet.rewind();
    const html = `
        <!doctype html>
        <html>
            <head ${head.htmlAttributes.toString()}>
                ${head.title.toString()}
                ${head.meta.toString()}
                ${head.link.toString()}
            </head>
            <body>
                <div id="content">
                    // React stuff here
                </div>
            </body>
        </html>
    `;
    

    the value of html is:

      <!doctype html>
      <html>
          <head >
    
    
    
          </head>
          <body>
              <div id="content">
                  // React stuff here
              </div>
          </body>
      </html>
    

    ... so basically all the toString()s simply output empty strings. The rest of the rendering is OK, with all my components rendering as they're are expected to.

    Is there anything wrong with my snippet above?

    opened by bguiz 18
  • Use `title` and `titleTemplate` in other tags.

    Use `title` and `titleTemplate` in other tags.

    I am rendering open graph and twitter meta tags and I would like to set the og:title and twitter:title content values to the same as what you render by combining the title and titleTemplate props. Is there a way to set those content values using that same process?

    enhancement help wanted 
    opened by brianespinosa 15
  • Error: Couldn't find preset

    Error: Couldn't find preset "latest"

    I'm not sure if this is the correct place to post this issue however... I'm using react-helmet in my project which I build with webpack and babel.js. When I build I get

    ERROR in ./~/react-helmet/lib/Helmet.js Module build failed: Error: Couldn't find preset "latest" relative to directory /path/to/my/project/node_modules/react-helmet.

    I believe this started because of version af13c9c of package.json where the react-helmet babel config was moved into it's package.json.

    The error indicates that the latest babel.js preset was not found, which the babel config within react-helmet is calling for. Therefore the error will only show up for projects that are not already using the latest babel preset.

    I have verified that my project uses the built version of Helmet.js found in ./node_modules/react-helmet/lib. What baffles me is why Babel is reading config from the react-helmet package.json. I understand node.js needs to read the main property to know where to find the code, but since that code is already transpiled I don't know why babel would need to read config from there.

    I'm using [email protected]. Workarounds include

    • adding the "latest" preset in the consuming project
    • manually removing the babel config from the react-helmet package.json
    • using [email protected] or below
    opened by eatrocks 14
  • Helmet not working with Facebook scraper.

    Helmet not working with Facebook scraper.

    Hi there, I've just started using Helmet to implement meta tags, so apps like Facebook and Twitter can get some useful information about my page and put it into previews. However, I notice that there is a delay between when I render a page, and when the meta tags/title get set on the page. This seems to be causing Facebook and Twitter to miss the tags, as they are not present at the instant of page load. I'm wondering if I am doing something wrong, or there is a fix I am not aware of.

    I am currently using the recommended server-side technique - IE

    str = React.renderToString(componentwithhelmet);
    Helmet.rewind();
    res.send(str)
    

    I'm using express. And I have confirmed that when I hard code in the description (that is, it is helmet-independent), FB picks up the data.

    I really like the package, but if it doesn't take care of this kind of thing, I am afraid I'll have to roll my own architecture for tags like these. Any insight would be appreciated!

    Thanks, Sam

    opened by sampurcell93 14
  • chore(deps): bump qs and body-parser

    chore(deps): bump qs and body-parser

    Bumps qs and body-parser. These dependencies needed to be updated together. Updates qs from 6.4.0 to 6.11.0

    Changelog

    Sourced from qs's changelog.

    6.11.0

    • [New] [Fix] stringify: revert 0e903c0; add commaRoundTrip option (#442)
    • [readme] fix version badge

    6.10.5

    • [Fix] stringify: with arrayFormat: comma, properly include an explicit [] on a single-item array (#434)

    6.10.4

    • [Fix] stringify: with arrayFormat: comma, include an explicit [] on a single-item array (#441)
    • [meta] use npmignore to autogenerate an npmignore file
    • [Dev Deps] update eslint, @ljharb/eslint-config, aud, has-symbol, object-inspect, tape

    6.10.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [actions] reuse common workflows
    • [Dev Deps] update eslint, @ljharb/eslint-config, object-inspect, tape

    6.10.2

    • [Fix] stringify: actually fix cyclic references (#426)
    • [Fix] stringify: avoid encoding arrayformat comma when encodeValuesOnly = true (#424)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] add note and links for coercing primitive values (#408)
    • [actions] update codecov uploader
    • [actions] update workflows
    • [Tests] clean up stringify tests slightly
    • [Dev Deps] update eslint, @ljharb/eslint-config, aud, object-inspect, safe-publish-latest, tape

    6.10.1

    • [Fix] stringify: avoid exception on repeated object values (#402)

    6.10.0

    • [New] stringify: throw on cycles, instead of an infinite loop (#395, #394, #393)
    • [New] parse: add allowSparse option for collapsing arrays with missing indices (#312)
    • [meta] fix README.md (#399)
    • [meta] only run npm run dist in publish, not install
    • [Dev Deps] update eslint, @ljharb/eslint-config, aud, has-symbols, tape
    • [Tests] fix tests on node v0.6
    • [Tests] use ljharb/actions/node/install instead of ljharb/actions/node/run
    • [Tests] Revert "[meta] ignore eclint transitive audit warning"

    6.9.7

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] stringify: avoid encoding arrayformat comma when encodeValuesOnly = true (#424)
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] add note and links for coercing primitive values (#408)
    • [Tests] clean up stringify tests slightly
    • [meta] fix README.md (#399)
    • Revert "[meta] ignore eclint transitive audit warning"

    ... (truncated)

    Commits
    • 56763c1 v6.11.0
    • ddd3e29 [readme] fix version badge
    • c313472 [New] [Fix] stringify: revert 0e903c0; add commaRoundTrip option
    • 95bc018 v6.10.5
    • 0e903c0 [Fix] stringify: with arrayFormat: comma, properly include an explicit `[...
    • ba9703c v6.10.4
    • 4e44019 [Fix] stringify: with arrayFormat: comma, include an explicit [] on a s...
    • 113b990 [Dev Deps] update object-inspect
    • c77f38f [Dev Deps] update eslint, @ljharb/eslint-config, aud, has-symbol, tape
    • 2cf45b2 [meta] use npmignore to autogenerate an npmignore file
    • Additional commits viewable in compare view

    Updates body-parser from 1.18.3 to 1.20.1

    Release notes

    Sourced from body-parser's releases.

    1.20.0

    1.19.2

    1.19.1

    1.19.0

    ... (truncated)

    Changelog

    Sourced from body-parser's changelog.

    1.20.1 / 2022-10-06

    1.20.0 / 2022-04-02

    1.19.2 / 2022-02-15

    1.19.1 / 2021-12-10

    1.19.0 / 2019-04-25

    ... (truncated)

    Commits

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    chore(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Restore React Helmet logo in README.md

    Restore React Helmet logo in README.md

    -Restored the logo in the README.md file back to the original, via Wayback Machine of an old capture of this repository since the original has been deleted on static.nfl.com

    opened by derbyshire10 1
  • chore(deps): bump engine.io and karma

    chore(deps): bump engine.io and karma

    Bumps engine.io to 6.2.1 and updates ancestor dependency karma. These dependencies need to be updated together.

    Updates engine.io from 1.8.3 to 6.2.1

    Release notes

    Sourced from engine.io's releases.

    6.2.1

    :warning: This release contains an important security fix :warning:

    A malicious client could send a specially crafted HTTP request, triggering an uncaught exception and killing the Node.js process:

    Error: read ECONNRESET
        at TCP.onStreamRead (internal/stream_base_commons.js:209:20)
    Emitted 'error' event on Socket instance at:
        at emitErrorNT (internal/streams/destroy.js:106:8)
        at emitErrorCloseNT (internal/streams/destroy.js:74:3)
        at processTicksAndRejections (internal/process/task_queues.js:80:21) {
      errno: -104,
      code: 'ECONNRESET',
      syscall: 'read'
    }
    

    Please upgrade as soon as possible.

    Bug Fixes

    • catch errors when destroying invalid upgrades (#658) (425e833)

    6.2.0

    Features

    • add the "maxPayload" field in the handshake details (088dcb4)

    So that clients in HTTP long-polling can decide how many packets they have to send to stay under the maxHttpBufferSize value.

    This is a backward compatible change which should not mandate a new major revision of the protocol (we stay in v4), as we only add a field in the JSON-encoded handshake data:

    0{"sid":"lv_VI97HAXpY6yYWAAAC","upgrades":["websocket"],"pingInterval":25000,"pingTimeout":5000,"maxPayload":1000000}
    

    Links

    6.1.3

    Bug Fixes

    • typings: allow CorsOptionsDelegate as cors options (#641) (a463d26)
    • uws: properly handle chunked content (#642) (3367440)

    ... (truncated)

    Changelog

    Sourced from engine.io's changelog.

    6.2.1 (2022-11-20)

    :warning: This release contains an important security fix :warning:

    A malicious client could send a specially crafted HTTP request, triggering an uncaught exception and killing the Node.js process:

    Error: read ECONNRESET
        at TCP.onStreamRead (internal/stream_base_commons.js:209:20)
    Emitted 'error' event on Socket instance at:
        at emitErrorNT (internal/streams/destroy.js:106:8)
        at emitErrorCloseNT (internal/streams/destroy.js:74:3)
        at processTicksAndRejections (internal/process/task_queues.js:80:21) {
      errno: -104,
      code: 'ECONNRESET',
      syscall: 'read'
    }
    

    Please upgrade as soon as possible.

    Bug Fixes

    • catch errors when destroying invalid upgrades (#658) (425e833)

    3.6.0 (2022-06-06)

    Bug Fixes

    Features

    • decrease the default value of maxHttpBufferSize (58e274c)

    This change reduces the default value from 100 mb to a more sane 1 mb.

    This helps protect the server against denial of service attacks by malicious clients sending huge amounts of data.

    See also: https://github.com/advisories/GHSA-j4f2-536g-r55m

    • increase the default value of pingTimeout (f55a79a)

    ... (truncated)

    Commits
    • 24b847b chore(release): 6.2.1
    • 425e833 fix: catch errors when destroying invalid upgrades (#658)
    • 99adb00 chore(deps): bump xmlhttprequest-ssl and engine.io-client in /examples/latenc...
    • d196f6a chore(deps): bump minimatch from 3.0.4 to 3.1.2 (#660)
    • 7c1270f chore(deps): bump nanoid from 3.1.25 to 3.3.1 (#659)
    • 535a01d ci: add Node.js 18 in the test matrix
    • 1b71a6f docs: remove "Vanilla JS" highlight from README (#656)
    • 917d1d2 refactor: replace deprecated String.prototype.substr() (#646)
    • 020801a chore: add changelog for version 3.6.0
    • ed1d6f9 test: make test script work on Windows (#643)
    • Additional commits viewable in compare view

    Updates karma from 1.7.1 to 6.4.1

    Release notes

    Sourced from karma's releases.

    v6.4.1

    6.4.1 (2022-09-19)

    Bug Fixes

    v6.4.0

    6.4.0 (2022-06-14)

    Features

    • support SRI verification of link tags (dc51a2e)
    • support SRI verification of script tags (6a54b1c)

    v6.3.20

    6.3.20 (2022-05-13)

    Bug Fixes

    • prefer IPv4 addresses when resolving domains (e17698f), closes #3730

    v6.3.19

    6.3.19 (2022-04-19)

    Bug Fixes

    • client: error out when opening a new tab fails (099b85e)

    v6.3.18

    6.3.18 (2022-04-13)

    Bug Fixes

    • deps: upgrade socket.io to v4.4.1 (52a30bb)

    v6.3.17

    6.3.17 (2022-02-28)

    Bug Fixes

    • deps: update colors to maintained version (#3763) (fca1884)

    v6.3.16

    ... (truncated)

    Changelog

    Sourced from karma's changelog.

    6.4.1 (2022-09-19)

    Bug Fixes

    6.4.0 (2022-06-14)

    Features

    • support SRI verification of link tags (dc51a2e)
    • support SRI verification of script tags (6a54b1c)

    6.3.20 (2022-05-13)

    Bug Fixes

    • prefer IPv4 addresses when resolving domains (e17698f), closes #3730

    6.3.19 (2022-04-19)

    Bug Fixes

    • client: error out when opening a new tab fails (099b85e)

    6.3.18 (2022-04-13)

    Bug Fixes

    • deps: upgrade socket.io to v4.4.1 (52a30bb)

    6.3.17 (2022-02-28)

    Bug Fixes

    • deps: update colors to maintained version (#3763) (fca1884)

    6.3.16 (2022-02-10)

    Bug Fixes

    • security: mitigate the "Open Redirect Vulnerability" (ff7edbb)

    ... (truncated)

    Commits
    • 0013121 chore(release): 6.4.1 [skip ci]
    • 63d86be fix: pass integrity value
    • 84f7cc3 chore(release): 6.4.0 [skip ci]
    • f2d0663 docs: add integrity parameter
    • dc51a2e feat: support SRI verification of link tags
    • 6a54b1c feat: support SRI verification of script tags
    • 5e71cf5 chore(release): 6.3.20 [skip ci]
    • e17698f fix: prefer IPv4 addresses when resolving domains
    • 60f4f79 build: add Node 16 and 18 to the CI matrix
    • 6ff5aaf chore(release): 6.3.19 [skip ci]
    • Additional commits viewable in compare view

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Warning 'UNSAFE_componentWillMount', How to fix the problem?

    Warning 'UNSAFE_componentWillMount', How to fix the problem?

    Helmet Error 1 Helmet Error 2

    Warning facing whine I am using react-helmet.

    Warnings -> `Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.

    • Move code with side effects to componentDidMount, and set initial state in the constructor.

    Please update the following components: SideEffect(NullComponent)`

    opened by yousuf4you 3
  • How do I append a value to the title?

    How do I append a value to the title?

    Is there a way to append an additional value to all page titles?

    For example, something like:

    ${helmet.title.append(` - ${process.env.APP_NAME}`).toString()}
    
    opened by kjoedion 3
Releases(6.1.0)
  • 6.1.0(Jun 8, 2020)

  • 6.0.0(Apr 30, 2020)

    Features

    • Bundle with Rollup instead of Webpack - As a result, the default export was removed and Helmet must now be imported as a named component - import {Helmet} from "react-helmet" (#395)
    • Replace deepEqual with isEqual (#402)
    Source code(tar.gz)
    Source code(zip)
  • 5.0.0(Mar 21, 2017)

    Features

    • New Simplified API (fully backward-compatible) - Helmet now takes plain HTML tags for the majority of the API with just a few remaining props for Helmet - retaining titleTemplate, defaultTitle, onChangeClientState, and one new - encodeSpecialCharacters - refer to README for details. Directly passing Helmet props will be deprecated in the future. (#246)
    • requestIdleCallback utilized to consolidate DOM changes and makes these non-blocking for things like animations. Fixes first client-side render not matching server-side render. Maintains one DOM change between route changes on the client-side as well. (#248)
    • On server-side, Helmet.renderStatic() aliased to Helmet.rewind() for more clarity. rewind will be deprecated in the future.
    • Yarn support
    Source code(tar.gz)
    Source code(zip)
Owner
National Football League
Together, We Make Football. And Software.
National Football League
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.8k Jan 4, 2023
Document Typescript React components with TSDoc and export Storybook-friendly JSON 🤖

✨ Document React components with @prop ✨ react-tsdoc ?? react-tsdoc is an tool to extract information from React Typescript component files with TSDoc

Noah Buscher 13 Oct 15, 2022
Whoosh - minimalistic React state manager

Whoosh - minimalistic React state manager Whoosh is a React state manager which entire API consists of exactly one function - createShared(). TL;DR ve

Alexander Blk 9 Nov 7, 2022
✍ It has never been so easy to document your things!

Docz makes it easy to write and publish beautiful interactive documentation for your code. Create MDX files showcasing your code and Docz turns them i

Docz 23.1k Jan 9, 2023
we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

고스락 6 Aug 12, 2022
A complete habits manager, where you can track your progress and complete each daily activity in an organized way.

TrackIt Habit manager in a dynamic, clear and simple way. TackIt is an application that seeks to make it simple and accessible for any user to control

Rui Neto 13 Dec 31, 2022
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil · Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Facebook Experimental 18.2k Jan 8, 2023
React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync)

React Starter Kit — "isomorphic" web app boilerplate React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Expr

Kriasoft 21.7k Dec 30, 2022
📋 React Hooks for forms validation (Web + React Native)

English | 繁中 | 简中 | 日本語 | 한국어 | Français | Italiano | Português | Español | Русский | Deutsch | Türkçe Features Built with performance and DX in mind

React Hook Form 32.4k Dec 29, 2022
:black_medium_small_square:React Move | Beautiful, data-driven animations for React

React-Move Beautiful, data-driven animations for React. Just 3.5kb (gzipped)! Documentation and Examples Features Animate HTML, SVG & React-Native Fin

Steve Hall 6.5k Jan 1, 2023
React features to enhance using Rollbar.js in React Applications

Rollbar React SDK React features to enhance using Rollbar.js in React Applications. This SDK provides a wrapper around the base Rollbar.js SDK in orde

Rollbar 39 Jan 3, 2023
🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!

toastify-react-native ?? toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense! De

Zahid Ali 29 Oct 11, 2022
Soft UI Dashboard React - Free Dashboard using React and Material UI

Soft UI Dashboard React Start your Development with an Innovative Admin Template for Material-UI and React. If you like the look & feel of the hottest

Creative Tim 182 Dec 28, 2022
A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router.

A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router. It also includes a theme switcher from light to dark mode.

Franklin Okolie 4 Jun 5, 2022
Finished code and notes from EFA bonus class on building a React project without create-react-app

React From Scratch Completed Code This is the completed code for the EFA bonus class on building a React project from scratch. Included are also markd

Conor Broaders 3 Oct 11, 2021
Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16: http://dashboards.webkom.co/react/airframe

Airframe React High Quality Dashboard / Admin / Analytics template that works great on any smartphone, tablet or desktop. Available as Open Source as

Mustafa Nabavi 6 Jun 5, 2022
React tooltip is a React.JS Component that brings usefull UX and UI information in selected elements of your website.

React Tooltip ✅ React tooltip is a React.JS Component that brings usefull UX and UI information in elements of your website. Installation ⌨️ React Too

Marc Ramos 1 Dec 22, 2021
React-Mini-Projects - Simple React mini-applications

React Mini Projects A Fully Responsive React Application contain these mini apps : Todo App Movie App Budget App Flash Card App Factor App This app wa

Morteza Rezaienia 1 Jan 1, 2022
React-tutorial - A React tutorial from Udemy (Academind)

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Patrick James Nengasca 2 Mar 31, 2022