Scholar.ed

A React component to embed Google Scholar profiles in a mobile-friendly way.

Quick Start

Add the following code to your HTML page:

<!-- Load React -->
<script
	src="https://unpkg.com/react@18/umd/react.production.min.js"
	crossorigin
></script>
<script
	src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
	crossorigin
></script>

<!-- Load Scholar.ed -->
<link
	rel="stylesheet"
	href="https://unpkg.com/scholar-ed@latest/dist/scholar-ed.css"
/>
<script
	src="https://unpkg.com/scholar-ed@latest/dist/scholar-ed.min.js"
	crossorigin
></script>

<!-- Add the component where you want it to appear -->
<div data-scholar-id="YOUR_SCHOLAR_ID"></div>

Replace YOUR_SCHOLAR_ID with your Google Scholar ID (found in your profile URL).

Advanced Usage

Options

You can customize the component using data attributes:

<div
	data-scholar-id="YOUR_SCHOLAR_ID"
	data-max-publications="5"
	data-class-name="custom-theme"
></div>

• data-scholar-id: Your Google Scholar ID (required)
• data-max-publications: Maximum number of publications to display
• data-class-name: Custom CSS class for styling

Manual Initialization

If you prefer more control, you can initialize the component manually:

<div id="scholar-profile"></div>
<script>
	const container = document.getElementById("scholar-profile");
	const root = ReactDOM.createRoot(container);
	root.render(
		React.createElement(ScholarEd.ScholarProfile, {
			scholarId: "YOUR_SCHOLAR_ID",
			maxPublications: 10,
			className: "custom-theme",
		})
	);
</script>

Using with React

If you're using React, you can install the package via npm:

npm install scholar-ed

Then use it in your components:

import { ScholarProfile } from "scholar-ed";

function App() {
	return (
		<ScholarProfile
			scholarId="YOUR_SCHOLAR_ID"
			maxPublications={10}
			className="custom-theme"
		/>
	);
}

Backend Requirements

The component requires a backend server to fetch Google Scholar data. You can either:

1. Use our hosted API (coming soon)
2. Set up your own server using the provided example code

Development

# Install dependencies
npm install

# Build the package
npm run build

# Run the demo
cd demo && npm run dev

License

MIT