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-style-guide
Advanced tools
Readme
A simple React component for building living style guides with React. Check out the example.
highlight.js
(or include your own).<StyleGuideItem
title="Cool Button"
description="This is a very cool button!"
>
<CoolButton>
Button!
</CoolButton>
<CoolButton type="primary">
Primary Button!
</CoolButton>
</StyleGuideItem>
Optionally, include the CSS in react-style-guide.css
for a nice set of default styles.
npm install
npm run example
Then you can browse to http://localhost:8080/
To build the example files once:
npm run build-example
Then you can open ./examples/index.html
Type: String
Optional
A text title for the section.
Type: String
Optional
An expanded description.
Type: Boolean
Default: false
Set to true
to use HTML for the section description.
Type: String
Example markup as a string. Use when you don't want auto-generated JSX markup for a section.
Type: Function
A custom syntax highlighting function. Takes the code example markup as a string, must return the example as HTML with syntax highlighting markup.
Type: Boolean
Default: true
Set to false
to disable expandable markup samples (making markup visible all the time).
Type: Boolean
Default: false
Set to true
to make markup samples expanded by default.
Type: Boolean
Default: true
Set to true to prevent section titles from being wrapped in anchor tags (allowing users to easily link to sections).
Type: String
Default: h2
HTML tag name for style guide headings.
Type: String
Default: Guide
HTML class for the top level element of the component.
Type: String
Default: Guide-heading
HTML class for the heading element.
Type: String
Default: Guide-description
HTML class for the description element.
Type: String
Default: Guide-example
HTML class for the example element.
Type: String
Default: Guide-markup
HTML class for the markup sample element.
Type: String
Default: Guide-anchor
HTML class for the anchor wrapping the heading element.
Type: String
Default: Guide-expanderSection
HTML class for the element containing the section expander button.
Type: String
Default: Guide-expander
HTML class for the section expander button.
Type: String
Default: Expand
Text content of the section expander button when section is not expanded.
Type: String
Default: Collapse
Text content of the section expander button when section is expanded.
FAQs
A component to display React components with their JSX source in style guides
The npm package react-style-guide receives a total of 31,549 weekly downloads. As such, react-style-guide popularity was classified as popular.
We found that react-style-guide 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.