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.
react-marksome
Advanced tools
Readme
Parses some markdown, builds a tree of segments and renders them in React.
It was designed for adding basic support for styling and links to singleline strings.
See Rationale for more info.
Install:
npm i react-markdown
Import and render the Marksome component:
import { Marksome } from 'react-marksome';
function Demo() {
const text =
'The *quick* *brown* **fox** jumps over the *lazy* **dog**. [Wikipedia][1]';
const references: References = {
'1':
'https://en.wikipedia.org/wiki/The_quick_brown_fox_jumps_over_the_lazy_dog',
};
return <Marksome text={text} references={references} />;
}
renders the following line:
The quick brown fox jumps over the lazy dog. Wikipedia
For more examples, see the stories together with related fixtures.
React component that parses and renders a subset of markdown.
It expects the markdown text to be provided via a text
prop, which then is combined with reference links ([label][reference]
)defined under the references
prop.
type MarksomeProps = HTMLAttributes<HTMLSpanElement> & {
text: string;
references?: References;
};
type References = Record<string, string | ReferenceRenderFunction>;
type ReferenceRenderFunction = (key: Key, children: ReactNode) => ReactNode;
See Quick start.
One can actually render custom components in the place of reference links by providing a render function instead of link url:
function CustomComponentsDemo() {
const text = 'The following is an actual button: [*Howdie*][greeting-button]';
const references: References = {
'greeting-button': (key, children) => (
<button
key={key}
onClick={() => {
alert('Hello!');
}}
>
{children}
</button>
),
};
return <Marksome text={text} references={references} />;
}
The current subset of markdown that is supported is:
By restricting ourselves to only support some markdown we're able to:
Additionally, we build out a tree of segments instead of simply using string replacement mostly for extensibility and configuratility, like being able to render segments with custom React components.
All of the above means that users don't need to worry about escaping the text since:
The following browserslist is supported without the need of any polyfills:
caniuse-lite db date: 15/02/2020
If you're looking for wider markdown support:
This project was bootstrapped with TSDX. Check its docs for more info on the commands.
npm run storybook
This loads the stories from ./stories
.
Jest tests are set up to run with npm test
.
Calculates the real cost of your library using size-limit with npm run size
and visualize it with npm run analyze
.
FAQs
Lightweight, flexible and readable labels in React using a subset of markdown
The npm package react-marksome receives a total of 1,190 weekly downloads. As such, react-marksome popularity was classified as popular.
We found that react-marksome 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.