Welcome to the EU React Component Library! This library provides a collection of reusable, customizable React components to help you build your applications faster and with consistent styling.
To use this component library in your React project, you can install it via npm or yarn. Make sure you have react and react-dom installed in your project as they are peer dependencies.
# Using npm
npm install @euael/eu-react
# Using yarn
yarn add @euael/eu-reactTo start using the components, import them into your project as follows:
import React from 'react';
import '@euael/eu-react/index.css'; // Import the CSS styles
import { Badge } from '@euael/eu-react';
function App() {
return (
<div>
<h1>Hello, World!</h1>
<Badge color="green">Success</Badge>
</div>
);
}
export default App;Note: It's important to import the CSS file @euael/eu-react/index.css to ensure that the components are styled correctly.
A badge component that displays a label or count. Useful for notifications or status indicators.
import { Badge } from '@euael/eu-react';children(string, required): The text to display inside the badge.color(string, optional): Determines the background and text colors. Options:'gray'(default)'red''yellow''green''blue''indigo''purple''pink'
variant(string, optional): The shape of the badge. Options:'square'(default): Rounded corners.'pill': Fully rounded edges.
className(string, optional): Custom CSS classes for additional styling.
<Badge color="green">Active</Badge>
<Badge color="red" variant="pill">Error</Badge>Displays important alerts and notifications at the top of the page or section.
import { Banner } from '@euael/eu-react';title(string, required): The title text of the banner.status(string, optional): Determines the color scheme and icon. Options:'info'(default)'success''warning''error'
children(string or ReactNode, optional): Additional content to display in the banner.className(string, optional): Custom CSS classes for additional styling.
<Banner status="success" title="Operation Successful">
Your operation was completed successfully.
</Banner>A flexible card component for displaying content in a structured format.
import { Card } from '@euael/eu-react';title(string, required): The title of the card.children(ReactNode, required): The content inside the card.icon(ReactNode, optional): An icon displayed at the top of the card.iconBgColor(string, optional): Background color for the icon container.className(string, optional): Custom CSS classes for additional styling.
<Card title="Welcome" icon={<YourIconComponent />}>
<p>This is an example of a card content.</p>
</Card>Display user feedback or quotes in an attractive format.
import { Testimonials } from '@euael/eu-react';image(string, required): URL or import of the image to display.quote(string, required): The testimonial text.author(string, required): Name of the person giving the testimonial.position(string, required): Position or title of the person.bgColor(string, optional): Background color of the testimonial card.className(string, optional): Custom CSS classes for additional styling.
<Testimonials
image="path/to/image.jpg"
quote="This product exceeded my expectations."
author="Jane Doe"
position="CEO of Company"
/>A set of chart components for data visualization, powered by VisX.
All chart components accept the following common props:
data(array, required): Data to be visualized.width(number, required): Width of the chart in pixels.height(number, required): Height of the chart in pixels.margin(object, optional): Margins around the chart. Default is{ top: 20, right: 30, bottom: 50, left: 40 }.className(string, optional): Custom CSS classes for additional styling.
Displays line charts for time series or continuous data.
import { LineChart } from '@euael/eu-react';xAccessor(function, optional): Accessor function for the x-axis values.yAccessor(function, optional): Accessor function for the y-axis values.xScaleType(string, optional): Type of x-axis scale. Options are'time'or'linear'. Default is'linear'.strokeColor(string, optional): Color of the line. Default is'#2563EB'(Tailwind blue-600).strokeWidth(number, optional): Width of the line. Default is2.curveType(string, optional): Curve interpolation type. Options are'linear','monotoneX','cardinal','basis'. Default is'linear'.showGrid(boolean, optional): Whether to display grid lines. Default istrue.tooltipContent(function, optional): Custom function to render tooltip content.
const data = [
{ x: new Date(2023, 0, 1), y: 50 },
{ x: new Date(2023, 0, 2), y: 30 },
// ...
];
<LineChart
data={data}
width={600}
height={400}
xScaleType="time"
strokeColor="#10B981" // Tailwind green-500
curveType="monotoneX"
/>Displays area charts for cumulative data visualization.
import { AreaChart } from '@euael/eu-react';Inherits all LineChart props with the addition of:
areaColor(string, optional): Color of the area fill. Default is'#2563EB'.
<AreaChart
data={data}
width={600}
height={400}
xScaleType="time"
areaColor="#3B82F6" // Tailwind blue-500
/>Displays grouped bar charts for categorical data comparison.
import { BarChart } from '@euael/eu-react';keys(array, required): Keys of the data to display.x0Accessor(function, required): Accessor function for the grouping variable.x0ScalePadding(number, optional): Padding between groups. Default is0.2.colors(array, optional): Array of colors for the bars.
const data = [
{ category: 'A', value1: 30, value2: 20 },
{ category: 'B', value1: 20, value2: 80 },
// ...
];
<BarChart
data={data}
keys={['value1', 'value2']}
x0Accessor={(d) => d.category}
width={600}
height={400}
/>Displays pie charts for proportional data.
import { PieChart } from '@euael/eu-react';innerRadius(number, optional): Inner radius for donut charts. Default is0.outerRadius(number, optional): Outer radius of the pie. Default is calculated based on width and height.colors(array, optional): Array of colors for the slices.
const data = [
{ label: 'Apples', value: 10 },
{ label: 'Bananas', value: 20 },
// ...
];
<PieChart
data={data}
width={400}
height={400}
/>Displays scatter plots for irregular data distributions.
import { ScatterPlot } from '@euael/eu-react';xAccessor(function, optional): Accessor function for the x-axis values.yAccessor(function, optional): Accessor function for the y-axis values.xScaleType(string, optional): Type of x-axis scale. Options are'time'or'linear'. Default is'linear'.pointColor(string, optional): Color of the data points. Default is'#EF4444'(Tailwind red-500).pointSize(number, optional): Size of the data points. Default is5.
const data = [
{ x: 10, y: 20 },
{ x: 15, y: 10 },
// ...
];
<ScatterPlot
data={data}
width={600}
height={400}
/>Displays temporary notifications or messages to the user.
import { Toast } from '@euael/eu-react';children(ReactNode, required): The content to display inside the toast.className(string, optional): Custom CSS classes for additional styling.
<Toast>
<p>This is a toast message.</p>
</Toast>Note: For advanced usage, consider integrating with a state management solution or context to control the display of toasts globally.
A responsive navigation bar component that supports dropdown menus and mobile navigation.
import { NavBar, NavMenu, NavItem, NavDropdown } from '@euael/eu-react';children(ReactNode, required): The content to display inside the navbar.className(string, optional): Custom CSS classes for additional styling.
// In your component or App.js
import React from 'react';
import { NavBar, NavMenu, NavItem, NavDropdown } from '@euael/eu-react';
import Logo from './path-to-your-logo.svg';
function App() {
return (
<NavBar logo={<img src={Logo} alt="Logo" />}>
<NavMenu>
<NavItem href="/">Home</NavItem>
<NavDropdown title="About Us">
<NavItem href="/about/mission">Our Mission</NavItem>
<NavItem href="/about/team">Team</NavItem>
<NavDropdown title="More">
<NavItem href="/about/faq">FAQ</NavItem>
<NavItem href="/about/contact">Contact</NavItem>
</NavDropdown>
</NavDropdown>
<NavItem href="/contact">Contact</NavItem>
</NavMenu>
</NavBar>
)
}
export default App;logo(ReactNode, optional): The logo or branding element displayed on the left side.children(ReactNode, optional): Typically aNavMenucomponent containing navigation items.className(string, optional): Custom CSS classes for additional styling.
children(ReactNode, required): One or moreNavItemorNavDropdowncomponents.className(string, optional): Custom CSS classes for additional styling.
href(string, required): The URL or route the item should link to.children(ReactNode, required): The text or content of the navigation item.className(string, optional): Custom CSS classes for additional styling.onClick(function, optional): Click handler function.
title(string, required): The text displayed on the dropdown trigger.children(ReactNode, required): One or moreNavItemcomponents.buttonClassName(string, optional): Custom CSS classes for the trigger button.className(string, optional): Custom CSS classes for the dropdown menu.
- Styling: Uses Tailwind CSS classes for styling. You can override styles using the
classNameprops. - Responsive Behavior: The navigation bar is responsive out of the box. On mobile devices, it displays a hamburger menu that toggles the navigation links.
- Remember to import
@euael/eu-react/index.cssin your main entry file to include the necessary styles.
This library is licensed under the MIT License. See the LICENSE file for more information.
- Repository: GitHub - Euaell/eu-component-library
- Issues: Please report any issues on the GitHub Issues page.
Thank you for choosing the EU React Component Library! We hope these components help you build your applications more efficiently. If you have any questions or need assistance, feel free to reach out.