React-profile-builder NPM

Profile Builder Hsoub

New Features!

Images component can upload multi images
Urls component can add links
Video component can put youtube video url
Text component can add some text

Installing:

$ yarn add react-profile-builder

or with npm

$ npm i react-profile-builder --save

Usage:

import React from "react";
import ProfileBuilder from "react-profile-builder";

const App = () => {
  // use result as you want
  yourFunction = result => console.log(result);

  return (
    <section>
      <ProfileBuilder
        onRemoveImage={id => console.log(id)}
        onUploadNewImages={images => console.log(images)}
        blocks={blocks}
        saveTitle="حفظ البروفايل"
        editTitle="تعديل البروفايل"
        emptyTitle="لم تقم بإنشاء بروفايل لشركتك بعد"
        emptyText="يمكنك تخصيص البروفايل و اضافة نص او صورة او فيديوهات بالنقر علي زر التعديل"
        config={{
          locale: "ar",
          style: {
            buttons: {
              primary: "btn btn-primary",
              secondary: "btn btn-secondary"
            }
          }
        }}
        onSaveComplete={result => saveResult(result)}
      />
    </section>
  );
};

export default App;

and you can use example at files just open two terminal window: first one:

$ git clone https://github.com/Hsoub/react-profile-builder.git
$ cd react-profile-builder
$ yarn example

second one:

at react-profile-builder path

$ npm install -g json-server
$ yarn watchData

Return Data:

data will return as array has all component data like kind, name, content and else....

    {
      "id": 1,
      "title": "نبذة عني",
      "type": "text",
      "icon": "fa-th-large",
      "sort": 1,
      "text": " شخص مدرب و متخصص في مجال التسويق الالكتروني متخصص تحسين محركات البحث (SEO) ومحترف من عام ٢٠١٥ في ارشفة وظهور المواقع على محركات البحث باستراتيجيات لعمالقة محركات البحث"
    },
    {
      "id": 2,
      "title": "برومو اعمالي",
      "type": "video",
      "icon": "fa-file-video-o",
      "sort": 2,
      "video": "https://www.youtube.com/embed/jhDFmUC0xG4"
    },
    {
      "id": 3,
      "title": "معرض اعمالي",
      "type": "images",
      "icon": "fa-picture-o",
      "sort": 3,
      "images": [
        {
          "url": "https://cdn.dribbble.com/users/577645/screenshots/9516781/media/c890ec612e482c8e621726a068eaff7b.jpg",
          "alt": "design"
        },
        {
          "url": "https://cdn.dribbble.com/users/938871/screenshots/9517603/media/3c4c3cfd5773193471f597e3164943e3.jpg",
          "alt": "programmer"
        },
        {
          "url": "https://cdn.dribbble.com/users/1332195/screenshots/9249107/media/c1080a96bc6cf6ff7d0d1aa7e6bc647a.jpg",
          "alt": "ecommerce"
        },
        {
          "url": "https://cdn.dribbble.com/users/63407/screenshots/9509541/media/be74027fc85b53136d818833997ca341.png",
          "alt": "pattern"
        }
      ]
    },
    {
      "id": 4,
      "title": "مواقع قمت بانشائها",
      "type": "urls",
      "icon": "fa-paperclip",
      "sort": 4,
      "urls": [
        { "title": "Google", "link": "https://google.com" },
        { "title": "Facebook", "link": "https://facebook.com" },
        { "title": "Twitter", "link": "https://twitter.com" }
      ]
    }
  ];

Styling:

library has no style we use bootstrap classess on it and font-awesome add this lines to your style

.click-behavior:hover {
  cursor: pointer;
}

and don't forget to add rtl dir to html

<html dir="rtl"></html>

that's it just fun 😅

react-profile-builder builder profile-builder web builder

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago