atrc, short for Atomic React Components, is a versatile collection of React components designed to empower your React projects, with a special emphasis on seamless integration with WordPress. These components follow the atomic design principles, providing a structured and scalable approach to building user interfaces.
Before incorporating Atrc into your React project, ensure that the following prerequisites are met:
-
React Project Setup: Atrc is designed for React applications, so make sure you have a React project set up and configured.
-
Node.js and npm: Atrc is distributed as an npm package. Ensure that you have Node.js and npm installed on your development environment. You can download and install them from https://nodejs.org/.
-
@wordpress/scripts (Recommended for WordPress Integration): If you are planning to use Atrc within a WordPress project, it is recommended to set up and use
@wordpress/scripts
for streamlined integration.@wordpress/scripts
facilitates the integration of React components into WordPress plugins and themes and provides a smooth development experience. You can find more information about@wordpress/scripts
in the official documentation. -
Knowledge of Atomic Design Principles: Familiarize yourself with atomic design principles, as Atrc follows this design methodology. Understanding atoms, molecules, organisms, templates, and pages will help you leverage Atrc's full potential in your project.
-
Use atomic CSS: This project utilizes Atomic CSS. Ensure that you integrate it into your React project. If you are using it with WordPress, consider using the
wp_enqueue_scripts
,admin_enqueue_scripts
,enqueue_block_editor_assets
or any appropriate hooks and in the callback function usewp_register_style
andwp_enqueue_style
hooks to load the CSS.Example for WordPress integration:
/* Register Atomic css */ wp_register_style( 'atomic', 'path/to/atomic.min.css' ); // Enqueue Atomic CSS stylesheet wp_enqueue_style( 'atomic' );
Once you have these prerequisites in place, you are ready to seamlessly integrate Atrc into your React project and enjoy the benefits of its atomic components.
Follow these instructions to set up Atrc in your local development environment:
BEFORE YOU INSTALL: please read the prerequisites
To install and set up the library, run:
$ npm install atrc
Or if you prefer using Yarn:
$ yarn add atrc
Now that you have Atrc installed, you can use the components in your React project. Here's a basic example:
import { AtrcButton, AtrcCheckbox } from 'atrc';
const MyComponent = () => {
return (
<div>
<AtrcButton onClick={() => console.log('Button Clicked!')}>
Click me
</AtrcButton>
</div>
);
};
Here are All available components.
Thank you for your interest in contributing to Project ATRC. To submit your changes, please follow the steps outlined below.
-
Fork the Repository: Click on the "Fork" button on the top right corner of the repository page to create your own fork.
-
Clone your Fork: Clone your forked repository to your local machine using the following command:
git clone https://github.com/your-username/atrc.git
-
Create a Feature Branch: Create a new branch for your feature or bug fix:
git checkout -b my-new-feature
-
Make Changes: Add your changes to the project. You can use the following command to stage all changes:
git add .
-
Commit Changes: Commit your changes with a descriptive commit message:
git commit -a m 'Add some feature'
-
Push to your Branch: Push your changes to the branch you created on your fork:
git push origin my-new-feature
-
Submit a Pull Request: Go to the Pull Requests tab of the original repository and click on "New Pull Request." Provide a clear title and description for your changes, and submit the pull request.
Thank you for contributing to Atrc!
- Santosh Kunwar - codersantosh
See also the list of contributors who participated in this project.
- GPLv2 or later © Santosh Kunwar.
I would like to thanks all the React.js team, Gutenberg Team, WordPress Core Contributors and My team to motivate me to create this awesome react library.