formidable-oss-badges v1.4.1
Formidable OSS Badges
Badges for Formidable Open Source Projects
Contents
Using the package
yarn add formidable-oss-badges
ornpm install formidable-oss-badges
- In your react app,
import { FeaturedBadge, ProjectBadge } from "formidable-oss-badges";
- To get hover styles using CSS modules
import "formidable-oss-badges/dist/style.css";
- Use the
<ProjectBadge />
or<FeaturedBadge />
component as directed below
ProjectBadge
ProjectBadge props
The <ProjectBadge />
component takes five, optional, props:
Prop | Type | Description | Example |
---|---|---|---|
color | String (hex/RGB) | Base color of the badge | "#FF00FF" |
abbreviation | String | Short representation of the name. Large font. Typically one uppercase letter, one lowercase. | "Em" |
description | String | Title or brief description. Smaller text, displayed in all-caps. | "Enzyme Matchers" |
className | String | Class to apply directly to the SVG | "project-badge" |
isHoverable | Boolean | Add hover style effects | true |
simple | Boolean | Hides the description and enlarges the abbreviation - use for small badge display | false |
It is recommended to at least include the color
, description
, and abbreviation
props.
ProjectBadge children
Will accept any svg child (we recommend to use an <image/>
with an embedded png, svg or lossless image format of your choice. See example 5).
Presence of a child will cause the component to ignore any abbreviation
prop.
You will need to position the child yourself.
e.g:
<image x="14%" y="20%" />
FeaturedBadge
To use a Featured Formidable Badge, you only need to pass in a single prop, name
, that matches one of the available badges listed below.
Available Badges
See featuredLogos for the latest available lineup.
renature
spectacle
urql
victory
nuka
owl
groqd
envy
figlog
cloudsplice
For a simplified version of the logo without the name in the badge (works better for smaller sizes), you can use the simple
variant of any of the above options.
<FeaturedBadge name="victory" simple />
FeaturedBadge props
Prop | Type | Description | Default |
---|---|---|---|
name | String | One of the available badge names | '' |
className | String | Additional class names | '' |
isHoverable | Boolean | Add hover style effects | true |
simple | Boolean | Hides the description and enlarges the abbreviation - use for small badge display | false |
Examples (with Images)
ProjectBadge Usage
Example 1:
<ProjectBadge color="#89E" abbreviation="No" description="Number" />
Example 2:
<ProjectBadge color="#E48055" abbreviation="Em" description="Enzyme Matchers" />
Example 3:
<ProjectBadge />
Example 5:
ProjectBadge with svg child:
<ProjectBadge abbreviation="R" description="React" color="#90dafa">
<image
x="14%"
y="20%"
width="50%"
href="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png"
/>
</ProjectBadge>
FeaturedBadge Usage
Example 6:
<FeaturedBadge name="victory">
Example Badges
1 | 2 | 3 |
---|---|---|
4 | 5 | 6 |
---|---|---|
Try the components locally
To try out the badge components locally:
git clone
this repocd formidable-oss-badges
yarn install
yarn storybook
Maintenance Status
Active: Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.
18 days ago
20 days ago
2 months ago
5 months ago
5 months ago
7 months ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago