Neurosis Prevention Mechanism
    Have ideas to improve npm?Join in the discussion! »

    react-html-map
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.1 • Public • Published

    react-html-map

    Declarative, composable and secure HTML rendering for React.
    Read the introduction article for the thoughts behind this lib.

    Example

    Provide your html, your 'tag mapping', and you're done!

    import HtmlMapper from 'react-html-map';
    
    <HtmlMapper html={html}>
      {{
        p: Body,
        h1: (props) => <Title variant="large" {...props} />,
        h2: (props) => <Title variant="regular" {...props} />,
        h3: (props) => <Title variant="small" {...props} />,
        h4: (props) => <Title variant="micro" {...props} />,
        h5: (props) => <Title variant="tiny" {...props} />,
        a: ({ href, children, ...rest }) =>
          href?.startsWith("/") ? (
            // assume internal link
            <Link to={href}>{children}</Link>
          ) : (
            <a href={href} {...rest}>
              {children}
            </a>
          ),
      }}
    </HtmlMapper>

    This pattern can become quite powerful when reusing a tag mapping and overriding it as you deem fit, for example, in a situation where you want your p tags to be a tad bigger than the 'default':

    const tagMap = { p: Body, h1: ... };
    return (
      <>
        <HtmlMapper html={intro}>
          {{
            ...tagMap,
            p: ({ ...props }) => <Body variant="large" {...props} />,
          }}
        </HtmlMapper>
        <HtmlMapper html={text}>{tagMap}</HtmlMapper>
      </>
    );

    Security

    By default, react-html-map will ignore any tags that are not provided in your tag map.
    If you want to pass specific elements through 'as-is', you can define them with null in your tag mapping:

    <HtmlMapper html={html}>
      {{
        p: Body,
        ...
        strong: null,
        ul: null,
        li: null,
        br: null,
      }}
    </HtmlMapper>

    If you wish to have react-html-map pass through all tags it does not recognize, you can pass the acceptUnknown prop:

    <HtmlMapper
        html={html}
        // now we'll accept tags like strong by default,
        // but at the cost of predictibility and security.
        acceptUnknown
    >
      {{ p: Body }}
    </HtmlMapper>

    This is however NOT recommended, as it might leave you vulnerable to XSS attacks.

    Install

    npm i react-html-map

    TODO/goals

    • [x] Library code
    • [x] Write README
    • [x] Basic tests (does it crash?)
    • [x] Snapshot tests (does it render what we expect it to render?)
    • [ ] Example website (long term goal)
      An example exists in the example/ folder at the moment, but it's not quite finished just yet.

    Keywords

    none

    Install

    npm i react-html-map

    DownloadsWeekly Downloads

    15

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    28.4 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar