Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
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.
@alaboudi/react-observable
Advanced tools
Readme
A simple observable binding for your React components.
with Yarn
yarn install @alaboudi/react-observable
with NPM
npm install @alaboudi/react-observable
We have 2 primary APIs in this library: useObservable
& withObservable
. They
both enable your component to subscribe to an observable.
import { useObservable } from "@alaboudi/react-observable";
import { of } from "rxjs";
interface Book {
title: string;
description: string;
}
const FAKE_BOOK: Book = {
title: 'Moby-Dick',
description: 'A story about a whale 🐋'
};
const bookObservable$ = of(FAKE_BOOK);
const BookPreview = () => {
const book = useObservable(bookObservable$);
return (
<article>
<h1>{book.title}</h1>
<p>{book.description}</p>
</article>
)
}
if your observable does not emit a value upon first render, you may pass an optional 2nd parameter as a fallback initial value.
const bookObservable$ = new Subject<Book>();
const initialFallbackValue = {
title: 'The Kite Runner',
description: 'A story about a boy'
}
const BookPreview = () => {
const book = useObservable(bookObservable$, initialFallbackValue);
return (
<article>
<h1>{book.title}</h1>
<p>{book.description}</p>
</article>
)
}
If your project is not compatible with React hooks (prior to v16.8), then you can always use the following higher order component
const bookObservable$ = new Subject<Book>();
const initialFallbackValue: Book = {
//
}
const BookPreview = (props) => (
<article>
<h1>{props.book.title}</h1>
<p>{props.book.description}</p>
</article>
)
export default withObservable(
'book',
bookObservable$,
initialFallbackValue // optional
)(BookPreview)
Typescript typings are included in this library.
FAQs
A observable binding for React
The npm package @alaboudi/react-observable receives a total of 10 weekly downloads. As such, @alaboudi/react-observable popularity was classified as not popular.
We found that @alaboudi/react-observable 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.
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.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.