🔥🔥🔥 ReactPakistan EcoSystem — Build Web/Mobile UI with React Micro-Frontend 🔥🔥🔥
ReactPakistan EcoSystem 🎖
ReactPakistan
EcoSystem encompass around React
, React Native
& Docusaurus
technologies and tools. The philosophy beneath ReactPakistan
packages is to create Micro-Frontends, decoupled from the logic for maximum use cases re-useability in mind. We don’t want to limit developers by writing coupled components/functions. This one platform brings various solutions to building effective UI/UX in React
& ReactNative
, like removing the pain of adding responsive and theming features to it.
The eco-system is classified under generic
to specific
ways of building components library, this helps developers to re-use the generic
components as much as possible and build specific
stages of components on top of the generic
ones, hence keeping the concerned component logic to it’s relevant stage as required. Following is the higher level table to put things into perspective.
Table of Content
- The Architecture
- Technologies Covered
- React Pakistan Repositories
- React Commons Collection
- React UI Collection
- React Icon Collection
- React Logo Collection
- React Emoji Collection
- React Native Commons Collection
- React Native UI Collection
- React Native Icon Collection
- React Native Logo Collection
- React Native Emoji Collection
- React Native Boilerplate
- React Pakistan Docs
- Util Functions
- Util React Native Functions
- Eslint Config Shared
- Why ReactPakistan
The Architecture
Technologies Covered
- React
- React Native
- Docusaurus
React Pakistan Repositories
Following are list of all React Pakistan
repositories and their current status as of today.
React Commons Collection
React Commons Collection
is the most generic form of React
web components which can be transformed into any design specifications, required by your next project.
The general motivation involved in building this library from the ground zero is to create design-less React web components, which could then we extended upon to build anything specific to the project requirements and custom use cases.
Although, there are a ton of popular React
UI libraries available, but the intention behind React Pakistan
to bring an entire eco-system of web & mobile tools that helps developers to reduce their overall development time, hence maximum re-utilising the most generic form of React Commons Collection
.
Baked Responsiveness
React Commons Collection
library comes with built in responsive feature for each element right into it’s core. The secret sauce here is to induce each element of React Commons Collection
to be responsive, so that any layout built composed with these elements can be made responsive with great precision. Developers can customise what needs to be responsive and how so as per their design specifications. Following is the sample code to use the responsive feature of any React Commons Component
.
Checkout the above sample H1 code, desktop
, laptop
, laptopL
, mobileL
, mobileM
, mobileS
, tablet
are optional props that will manage the responsiveness of this component on each of these breakpoints with the help of underlying mechanics.
Imagine if we need to change colour of H1 on desktop
size screen, I’d leverage it’s desktop
props by doing so:
Notice, we just passed the stringified CSS
to the concerned props to manage our responsive code for each of these components, this is how simple it is to manage the responsive of each components as per your needs.
Baked Theme
By leveraging StyledComponents
built-in theme support has been configured throughout React Commons Collection
and all of it’s extensions too.
Theme is a massive object that holds a ton of properties categories under various sections, following is the interface
to put things into perspective.
Developers could either use the default theme by passing it down from the root of the application, like so;
This will enable access to theme object in either React
or StyledComponents
components. With the underlying implementation of ContextAPI
by StyledComponents
you will get the theme object in each of the StyledComponents
being declared. However, should you wish to get access to the theme object from any React
component, you could leverage the withTheme
High Order Component wrapper for that matter, following is the sample code for either of the ways:
Else, developers could update nodes of the theme object as per their design specifications too, following is the sample code to get started;
React UI Collection
React UI Collection
is an extension of React Commons Collection
, building project specific UI/UX on generic components. There are two fully functional apps built on this library;
An e-commerce
and developer portfolio
apps were built using React Commons Collection
components, cutting the development overheads and making sure to enable same coding standards and practices across all projects.
This approach helped a lot to write good standard, robust and maintainable code, single handedly.
React Icon Collection
React Icon Collection
is an extension of React Commons Collection
, this library contains 1000’s of React
SVG components of icons, making it so convenient for developers to take the pain out of using SVG with React
. Following is the sample code to get started with it.
React Logo Collection
Same as React Icon Collection
, but only difference it has is that it contains several logos. Following is the sample code to get started with it.
React Emoji Collection
Same as React Icon Collection
, but only difference it has is that it contains 1000’s of emojis. Following is the sample code to get started with it.
React Native Commons Collection
Same reasoning goes behind building this library as of React Commons Collection
, except that it focuses on React Native
platform rather.
Baked Theme
Theme support has been baked right into it’s core to enable several features across all extended libraries. The same theme concepts goes with this library too, like how to use it along React
& StyledComponents
and how to update theme nodes.
React Native UI Collection
Same reasoning goes behind building this library as of React UI Collection
, except that it focuses on React Native
platform rather.
React Native Icon Collection
Same reasoning goes behind building this library as of React Icon Collection
, except that it focuses on React Native
platform rather.
React Native Logo Collection
Same reasoning goes behind building this library as of React Logo Collection
, except that it focuses on React Native
platform rather.
React Native Emoji Collection
Same reasoning goes behind building this library as of React Emoji Collection
, except that it focuses on React Native
platform rather.
React Native Boilerplate
It is a curated list of built boilerplate of React Native
using various tool and technologies for everyone to kick-start quicker on their next cool app. Due to the recent changes in React Native
platforms, these boilerplates are not upgraded to the latest React Native
version but it is planned to be upgraded by Q1 2021.
React Pakistan Docs
Central documentation for all of React Pakistan
published packages and libraries, built on state of the art Docusaurus
. This helps developers to save time in switching between docs when using various libraries from React Pakistan
eco-system.
Util Functions
A collection of util functions for React
web libraries, helping to reduce the overall code length and to enable maximum re-useability across all packages.
Util React Native Functions
Same reasoning goes behind building this library as of Util Functions
, except that it focuses on React Native
platform rather.
Eslint Config Shared
Since all of React Pakistan
packages heavily relies on TypeScript
and at some places JavaScript
, so it’d be meaningful if we have a central space where all of our Eslint
rules are defined, this package just does that.
Why ReactPakistan
- It makes creating robust custom UI development painless for both
React
&React Native
platforms. - It allows developers to fully customise any generic component built under
React Commons Collection
orReact Native Commons Collection
library. - It makes using SVG with
React
&React Native
seamless. - It is lightweight compared to other popular UI libraries.
- It supports the tree shaking feature to keep the bundle size minimum as possible, following are some examples:
- You get Component Responsiveness feature out the box, baked right into it’s core, so you just have to pass down relevant CSS to their respective layout breakpoints.
- Multi Theme support is also baked right into the core, developers can either use the base theme or customise it as per their design specs.
- Robust codebase using
TypeScript
. - Tested codebase.
Star, Fork & Share
Should you like these series of open source ReactPakistan projects, please consider giving it a star, perhaps fork it and share it across your circles, every contribution counts, like these too.