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.

• Installation
• Usage Example
• Documentation
• Getting started with React Facebook UI
• UI Components
  • 1. Card
  • 2. Alert
  • 3. AutoHideScroll
  • 4. Badge
  • 5. BottomSheet
  • 6. Button and Link
  • 7. ButtonIcon
  • 8. Collapse
  • 9. DataTable
  • 10. DraggableList
  • 11. Form
    • 11.1. Input and TextArea
    • 11.2. Checkbox and Switch
    • 11.3. Dropdown
    • 11.4. Radio Button and Radio Group
  • 12. Grid
  • 13. Image
  • 14. LoadingBar
  • 15. MainLayout
  • 16. Menu
  • 17. Modal
  • 18. Navbar
  • 19. Pagination
  • 20. ReadMore
  • 21. Sidebar
  • 22. Stepper
  • 23. FormStepper
  • 24. Tabs
    • 24.1. HorizontalTabs
    • 24.2. VerticalTabs
  • 25. Toast and Notification
• Custom Hooks
  • useHttpRequest
  • useFakeData
  • usePagination
  • usePaginationOffline
  • useRefFunc
  • useForm
  • useStepper
  • useAppContext
  • useAppTheme
  • useAppDirection
  • useDevice
  • useOutsideAlerter
  • useResizeObserver
  • useWindowResize
• Helper Functions
• Change Theme and CSS
• NextJs implimentation

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

1. Create a react component <AppWrapper/> in your src/ directory with name AppWrapper.js
2. Wrap children prop with the <MainLayout /> component
3. On your src/index.js file , wrap you <App/> component with <AppWrapper/>.
4. 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 :

1. Open the layout wrapper file In your src/pages/_app.js
2. 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

3. 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/>}/>
}

4. Done.

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