React-facebook-ui NPM

An NPM package that offers a suite of UI components inspired by Facebook User Interface.

i'm currently looking for a job

This UI package is one of my Must Create projects , i spent a couple of months to achieve this and i'm currently in a need for a software development job. and i'm ready to be recruited.

Please contact me via:

My Portfolio
My LinkedIn

Thank you.

react-facebook-ui

You're using React or NextJs , and want to build a production ready app faster ? you're in the right place , inspired by the facebook user interface, react-facebook-ui offers a suite of UI components and functionalities to help you ship new features faster.

react-facebook-ui is light weight , fast and extremely easy to use and customize.

Features

+30 Powerful UI components (Form , Data-Table , Modal , Sidebar , Toast , Menu ... and much more).
Standalone , No dependency required.
Lightweight , less than ~600kb.
Built-in theme customization.
Light & Dark theme out of the box.
RTL Support.
Responsive.
NextJs support.
helper functions (custom useful react hooks, make easy HTTP reaquests, generate fake data ...).

Demo & Playground

Installation

react-facebook-ui is available as an npm package.

npm install react-facebook-ui

Usage Example

Here is an example of a basic app using <Button/> component from react-facebook-ui:

import React from "react";
import {Button} from "react-facebook-ui";
export default function App() {
    return  <Button color="primary">Hello World!</Button>
}

Documentation

Bellow is react-facebook-ui documentation , it contains all the components , hooks , and helper functions explained with examples , so you can use react-facebook-ui properly.

Getting started with React Facebook UI

After installing the react-facebook-ui package on a fresh react project :

if you are using NextJS , see NextJs implimentation

Create a react component <AppWrapper/> in your src/ directory with name AppWrapper.js
Wrap children prop with the <MainLayout /> component
On your src/index.js file , wrap you <App/> component with <AppWrapper/>.
Done

it should look something like this:

src/AppWrapper.js

import React from "react";
import {MainLayout} from "react-facebook-ui";

export default function AppWrapper({children}) {
    // TODO :: configure your app here

    return  <MainLayout defaultAppdata={{theme:'dark'}}>
        {children}
    </MainLayout>
}

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import AppWrapper from "./AppWrapper";

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
      <AppWrapper>
          <App />
      </AppWrapper>
  </React.StrictMode>
);

NOW you're ready to use the beauty of react-facebook-ui

NextJs implimentation

After installing the react-facebook-ui package on a fresh NextJs project :

Open the layout wrapper file In your src/pages/_app.js
Wrap the <Component {...pageProps}/> component with the <MainLayout /> component, it should look something like this:

src/pages/_app.js

import '../styles/globals.css'
import React from 'react';
import {MainLayout} from "react-facebook-ui";

function MyApp({ Component, pageProps }) {
  return  <MainLayout defaultAppdata={{theme:'dark'}}>
      <Component {...pageProps} />
    </MainLayout>
}
export default MyApp

Almost Done, as we know since some of react-facebook-ui components such as <ButtonIcon/> depends on SVG icons but NextJs webpack doesn’t have a loader set up to handle the svg file type (.svg files). to fix that we'll use the @svgr/webpack:

install: npm install --save-dev @svgr/webpack
create/edit next.config.js file with the content bellow:

module.exports = {
    webpack(config) {
        config.module.rules.push({
            test: /\.svg$/i,
            issuer: /\.[jt]sx?$/,
            use: ['@svgr/webpack'],
        });
        return config
    },
};

importing SVGs on NextJs like this:

import React from "react";
import {ButtonIcon} from "react-facebook-ui";
import SearchIcon from "../assets/icons/search.svg";

export default function App() {
    return <ButtonIcon icon={<SearchIcon/>}/>
}