In academic research and technical writing, we often need to cite and display DOI bibliographic information. While traditional text citations are standard, they seem a bit dull in the digital age. The open-source project React DOI Card introduced today provides us with a brand new, more beautiful, and intuitive way to present literature.
🎯 Project Overview#
React DOI Card is a completely independent React component library specifically designed to generate beautiful DOI bibliographic information cards. Unlike traditional citation methods, it can automatically retrieve the bibliographic metadata corresponding to the DOI and present it in an elegant card format, making the display of academic content more modern and user-friendly.
Core Features Overview#
🌐 Completely Independent: Does not rely on any local APIs, directly calls external DOI services to obtain data
✅ Bilingual Support: Supports both English literature (CrossRef API) and Chinese literature (China DOI resolution)
✅ TypeScript Friendly: Full TypeScript support and type definitions
✅ Smart Text Handling: All text content supports automatic line breaks for long texts
✅ Modern Design: Aesthetic interface based on Microsoft Fluent Design
✅ Intelligent Parsing: Automatically handles complete DOI links or pure DOI codes
✅ State Management: Built-in comprehensive handling of loading, error, and success states
✅ Highly Customizable: Supports CSS class name and inline style customization
✅ Lightweight Implementation: Zero additional dependencies, only relies on React
🚀 Use Cases#
This project is particularly suitable for the following scenarios:
- Academic Personal Homepage: Display published papers on personal websites
- Research Project Documentation: Cite relevant literature in project READMEs
- Blog Articles: Cite academic papers in technical blogs
- Online Resumes: Showcase academic achievements and publication records
- Research Reports: Cite literature in online research reports
💻 Quick Experience#
Installation is very simple and supports all mainstream package managers:
# Using npm
npm install react-doi-card
# Using yarn
yarn add react-doi-card
# Using bun
bun add react-doi-card
Basic usage is also straightforward:
import { DoiCard } from 'react-doi-card';
function App() {
return (
<div>
{/* English Literature */}
<DoiCard doi="10.1038/nature12373" lang="en" />
{/* Chinese Literature */}
<DoiCard doi="10.11821/dlxb202001001" lang="zh" />
{/* Custom Styles */}
<DoiCard
doi="10.1038/nature12373"
className="my-custom-card"
style={{
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
borderRadius: '12px'
}}
/>
</div>
);
}
demo: https://doicard.gankun.cn.ma/:::div{style="max=width: 300px"}
:::
🎨 Design Highlights#
The design of the project is very thoughtful, mainly reflected in:
- Visual Design: Uses Microsoft Fluent Design language, simple and modern
- Information Hierarchy: Clear information architecture, distinct levels for title, author, journal, year, etc.
- Responsive Layout: Adapts to different screen sizes, maintaining good visual effects
- State Feedback: Loading and error states have corresponding visual feedback
- Accessibility Design: Considers accessibility, supports screen readers
🌟 Technical Implementation#
From a technical perspective, there are several noteworthy points about this project:
Implementation of Bilingual Support#
The project cleverly integrates two sets of APIs:
- English Literature: Uses CrossRef API to obtain metadata from international journals
- Chinese Literature: Uses China DOI resolution service, effectively solving the display problem of Chinese literature
State Management#
Uses a custom Hook useDoiData to manage data fetching states:
const { data, loading, error } = useDoiData(doi, lang);
TypeScript Support#
Complete type definitions provide a good development experience:
interface DoiCardProps {
doi: string;
lang?: 'en' | 'zh';
className?: string;
style?: React.CSSProperties;
}
🔗 Multiple Usage Methods#
The project not only provides React components but also offers an API service that allows you to directly obtain SVG format cards via HTTP requests:
This method is particularly suitable for use in Markdown documents, GitHub READMEs, and other scenarios.
🚀 Deployment and Integration#
The project supports one-click deployment to Vercel:
https://vercel.com/new/clone?repository-url=https://github.com/Riceneeder/doi_stats_card
After deployment, you will have your own DOI card generation service that can be used anywhere images are supported.
🎯 Application Examples#
In practical use, you can display your papers in your GitHub README like this:
## My Published Papers
### Published in 2024
### Published in 2023
Or cite relevant literature in your personal blog:
## Related Work
Our research is based on the following important work:
This paper provides us with the theoretical foundation...
🔮 Future Prospects#
This project showcases new possibilities for the digital display of academic content. With the participation of the open-source community, we can expect:
- More Data Sources: Support for more academic databases and DOI services
- Theme Customization: More visual themes and style options
- Interactive Features: Adding click-through links, citation statistics, and more
- Mobile Optimization: Better display effects on mobile devices
- Internationalization: Support for literature display in more languages
📝 Summary#
React DOI Card is a very practical open-source project that addresses the pain points of academic literature display:
- Developer Friendly: Simple API, complete TypeScript support
- User Friendly: Aesthetic visual effects, clear information display
- Easy Deployment: One-click deployment, ready to use
- Flexible Usage: Supports both React components and HTTP API
Whether you are a scholar, blogger, or developer, if you need to cite academic literature in digital content, this project is worth a try. It not only enhances the visual effect of the content but also modernizes academic communication.
Project address:
If you find this project useful, feel free to give it a ⭐ Star, and contributions of code and ideas are welcome!