Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
react-rss
Advanced tools
Readme
Higher order component capable of injecting RSS feed from any url into props.
So far this feed only supports standard RSS params defined in: https://validator.w3.org/feed/docs/rss2.html.
import React, { FunctionComponent } from 'react';
import rssEnhancer, { InjectionRSSProps } from 'react-rss';
const DefaultRSSComponent: FunctionComponent<{ label: string } & InjectionRSSProps> = props => (
<div>
<h2>{props.label}</h2>
<a href={props.rss.header.link}>
{props.rss.header.title}
</a>
<ul>
{props.rss.items.map(item => (
<li>
{item.description}
</li>
))}
</ul>
</div>
);
export default rssEnhancer(
DefaultRSSComponent,
'https://techbeacon.com/rss.xml',
);
class SourcedRSSComponent extends Component<{ label: string } & InjectionRSSProps> {
public render() {
const { props } = this;
return (
<div>
<h2>{props.label}</h2>
<a href={props.rss.header.link}>
{props.rss.header.title}
</a>
<ul>
{props.rss.items.map(item => (
<li>
{item.description}
</li>
))}
</ul>
</div>
);
}
};
export default rssEnhancer(
SourcedRSSComponent
);
import React from "react";
import ReactDOM from "react-dom";
import DefaultRSSComponent from "./DefaultRSSComponent";
import SourcedRSSComponent from "./SourcedRSSComponent";
interface State {
value: string;
rssUrl: string;
}
class TestRSS extends React.Component<{}, State> {
state: State = {
value: '',
rssUrl: '',
}
public render() {
const { state } = this;
return (
<div>
<input value={state.value} onInput={e => this.setState({ value: (e.target as HTMLInputElement).value })} />
<button onClick={() => this.setState(prevState => ({ rssUrl: prevState.value }))}>Test component</button>
{state.rssUrl && (
<SourcedRSSComponent
url={state.rssUrl}
subscribe={true}
label="Sourced"
loadingComponent={() => <div>Loading sourced</div>}
errorComponent={e => {
console.error(e);
return <div>Failed to load this resource!</div>;
}}
/>
)}
<DefaultRSSComponent
label="Default"
loadingComponent={() => <div>Loading default..</div>}
errorComponent={() => <div>Sadly, no default rss :(</div>}
/>
</div>
);
}
}
ReactDOM.render(
<TestRSS />,
document.getElementById("root"),
);
Fixed typos in typings of this package. Added enhancers, which allow you to pick custom xml elements (using query selectors) out of RSS and add them to the component props.
Also, fixed default parsing of RSS XML document and added component update mechanism when passed url changes.
/**
* Props injected have a two-type template: first is header enhancement, second one is with what is each item enhanced.
*/
class SourcedRSSComponent extends Component<{ label: string } & InjectionRSSProps<{ hasImage: boolean }, { mediaUrl?: string }>> {
public render() {
const { props } = this;
return (
<div>
<h2>{props.label}</h2>
<a href={props.rss.header.link}>
{props.rss.header.title}
{props.rss.header.hasImage && ' Has image!'}
</a>
<ul>
{props.rss.items.map(item => (
<li>
{item.description}
{item.mediaUrl && <span>Url: {item.mediaUrl}</span>}
</li>
))}
</ul>
</div>
);
}
};
export default rssEnhancer(
SourcedRSSComponent,
null, // Default url is null, which means resulting component will need an url passed in its props.
url => ({ input: url, init: { method: 'POST' } }), // Enhances the used url request by any optional parameter, such as headers, method, etc.
(rss, header) => { // Enhances header portion of result
return { ...header, hasImage: Boolean(rss.image) };
},
(rssItem, item) => { // Enhances each item by json property
const mediaUrl = rssItem['media:content'].attributes.url;
if (mediaUrl) {
return { ...item, mediaUrl };
}
return item;
}
);
Added no-dependency parser of xml into a JSON object. The parser can handle attributes, children in xml and text/c-data nodes.
For a simple example, see above. This parser stores child nodes under 'children' property. Children will either be objects or arrays, depending on whether there are duplicate children with the same tag name. Parsed attributes will be stored inside 'attributes' property. Text/c-data nodes will be stored under 'text' property and will be concatenated.
This was done to simplify object access inside enhancers.
You can either setup an URL in the enhancer, or in the resulting component. However, the url has to be set. You can rewrite default url with the one on component.
If you have any ideas on how to improve this package, do not hesitate to file in a pull request or an issue on github.
FAQs
React component capable of reading and rendering any RSS feed
The npm package react-rss receives a total of 62 weekly downloads. As such, react-rss popularity was classified as not popular.
We found that react-rss demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.