Octodemo
ghsioux-react-templates 1.0.2
Install from the command line:
Learn more about npm packages
$ npm install @octodemo/ghsioux-react-templates@1.0.2
Install via package.json:
"@octodemo/ghsioux-react-templates": "1.0.2"
About this version
This repository provides a collection of React components intended for use as templates in other projects. The components are designed to be used as-is, with all CSS, styling, and icons included, and are now available as a public npm package.
The primary goal of this repository is to offer a set of pre-built, styled React components that can be easily integrated into various React applications. This helps maintain consistency in UI/UX across different projects and speeds up development by providing ready-to-use building blocks.
# Install the package
npm install @octodemo/ghsioux-react-templates
# Or with yarn
yarn add @octodemo/ghsioux-react-templates// Import and use components
import { AdvancedModal, ProgressBar } from '@octodemo/ghsioux-react-templates';This package is published to GitHub Packages as a public npm package, making it easy to use in any project.
npm install @octodemo/ghsioux-react-templatesIf you encounter any issues with the direct installation, you can configure npm to use GitHub Packages explicitly:
# Add this to your project's .npmrc file
@octodemo:registry=https://npm.pkg.github.comThen install the package:
npm install @octodemo/ghsioux-react-templatesThere are multiple ways to use these components in your React project:
import { BaseModal, ProgressBar } from '@octodemo/ghsioux-react-templates';If you're using Webpack, you can set up an alias for cleaner imports:
// webpack.config.js
module.exports = {
resolve: {
alias: {
'@react-templates': '@octodemo/ghsioux-react-templates'
}
}
};Then in your components:
import { BaseForm, ProductList } from '@react-templates';Here are examples of how to use each component:
import React, { useState } from 'react';
import { BaseModal } from '@octodemo/ghsioux-react-templates';
function ModalExample() {
const [isOpen, setIsOpen] = useState(false);
const openModal = () => {
setIsOpen(true);
};
const closeModal = () => {
setIsOpen(false);
};
const handleConfirm = () => {
// Handle confirmation action
closeModal();
};
return (
<>
<button onClick={openModal}>Open Modal</button>
<BaseModal
open={isOpen}
onClose={closeModal}
headerContent="Modal Title"
footerContent={
<>
<button onClick={closeModal} className="button-secondary">Cancel</button>
<button onClick={handleConfirm} className="button-primary">Confirm</button>
</>
}
>
<p>This is the modal content area.</p>
</BaseModal>
</>
);
}Similar to BaseModal but with additional features such as size options, animations, and more.
import React from 'react';
import { BaseForm } from '@octodemo/ghsioux-react-templates';
function FormExample() {
const formFields = [
{
name: 'name',
label: 'Name',
type: 'text',
required: true
},
{
name: 'email',
label: 'Email',
type: 'email',
required: true
},
{
name: 'message',
label: 'Message',
type: 'textarea'
}
];
const validationSchema = {
name: (value) => value ? true : 'Name is required',
email: (value) => {
if (!value) return 'Email is required';
if (!/^\S+@\S+\.\S+$/.test(value)) return 'Invalid email format';
return true;
}
};
const handleSubmit = (formData) => {
console.log('Form submitted:', formData);
// Process the form data
};
return (
<BaseForm
fields={formFields}
validationSchema={validationSchema}
onSubmit={handleSubmit}
/>
);
}import React from 'react';
import { CardComponent } from '@octodemo/ghsioux-react-templates';
function CardExample() {
return (
<CardComponent
title="Product Title"
subtitle="Product subtitle"
imageSrc="/path/to/image.jpg"
hoverable={true}
elevation={2}
footerContent={
<>
<button className="button-secondary">Details</button>
<button className="button-primary">Add to Cart</button>
</>
}
>
<p>This is the card content with product description.</p>
</CardComponent>
);
}import React, { useState } from 'react';
import { StarRating } from '@octodemo/ghsioux-react-templates';
function RatingExample() {
const [userRating, setUserRating] = useState(0);
const handleRatingClick = (value) => {
console.log(`User rated: ${value} stars`);
};
return (
<div>
{/* Display-only rating */}
<StarRating value={4.5} showValue={true} />
{/* Interactive rating */}
<StarRating
value={userRating}
interactive={true}
onUpdateValue={setUserRating}
onRatingClick={handleRatingClick}
/>
<p>Your rating: {userRating}/5</p>
</div>
);
}import React, { useState } from 'react';
import { ProgressBar } from '@octodemo/ghsioux-react-templates';
function ProgressExample() {
const [progress, setProgress] = useState(25);
const incrementProgress = () => {
if (progress < 100) {
setProgress(progress + 10);
}
};
return (
<>
<ProgressBar value={progress} />
<button onClick={incrementProgress}>Increment</button>
</>
);
}import React from 'react';
import { ProductList } from '@octodemo/ghsioux-react-templates';
function ProductListExample() {
const products = [
{ id: 1, name: 'Product A', price: 29.99, image: '/path/to/image.jpg' },
{ id: 2, name: 'Product B', price: 39.99, image: '/path/to/image.jpg' },
{ id: 3, name: 'Product C', price: 49.99, image: '/path/to/image.jpg' }
];
return (
<ProductList products={products} />
);
}If you're a maintainer of this package and need to publish a new version, follow these steps:
In package.json, update the version number following semantic versioning:
# Example: Update to version 1.0.1
npm version patch # for bug fixes
npm version minor # for new features
npm version major # for breaking changes- Go to GitHub → Settings → Developer settings → Personal access tokens → Fine-grained tokens
- Create a new token with these permissions:
- Read and Write access to packages
- Read access to contents
Create or update your ~/.npmrc file:
//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
@octodemo:registry=https://npm.pkg.github.comnpm run build
npm publishThis repository currently includes the following components:
-
AdvancedModal.tsx: A modal component with advanced features like customizable size, transitions, and additional styling options. -
BaseForm.tsx: A foundational form component that handles various input types, validation, and form submission. -
BaseModal.tsx: A basic modal component with overlay, header, body, and footer sections. -
CardComponent.tsx: A versatile card component with support for images, headers, content, and footers. -
ProductList.tsx: A component for displaying a list of products with customizable layout and selection events. -
ProgressBar.tsx: A component to indicate progress with customizable appearance and animation. -
StarRating.tsx: A star rating component with interactive and display modes.
Contributions are welcome! If you have a component that you think would be a good addition to this collection, please feel free to open a pull request. Ensure that the component is well-documented and includes all necessary styling.
MIT License
Copyright (c) 2025 Octodemo
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
