Package of Graphical and Non Graphical Libraries for React Developers

Package of graphical and non graphical libraries for React developers such as Canvas preloader and Regex functions.

npm install saffroncodejs

ui

import {ui} from 'saffroncodejs'

Preloader

1- Set the Preloader color,size and animation speed once in index.js ui.Preloader.setUp(“#777777ff”,200,200,0.2)
2- and then use it every where like below: <ui.Preloader/> ☺

Input

This is just like html input tag but it has better control on patterns and it will correct the user’s mismatches character

TagForInput

this component displayes a tag name on top corner of the input element passed to it (as a child component)
**the element can be an input, a textArea or a select input
**supports rtl and ltr direction
to use inside a react app:

<ui.TagForInput tagName="title">
  <input />
</ui.TagForInput>

Properties:

rtl : boolean —> whether the tagName should be on left corner or right – default is false
tagName: string —> the tag title
tagBackGround: string —> the background color of the tag span – default is white
tagColor: string —> tagName color – default is black

ItemSlider

this component is a slider for the cards (or divs with your own design) you pass to it.

DEMO
to use inside a react app:

<ui.ItemsSlider rtl id="slider1">
 <div className="item"></div>
 <div className="item"></div>
 <div className="item"></div>
 <div className="item"></div>
</ui.ItemsSlider>

Notice that the divs you pass to this component, should have a class and the class can be named and styled as you wish

Properties:
id : string —> this is the identifier that enables navigation button scrolling
rtl : boolean —> whether the tagName should be on left corner or right – default is false

libs

Pure JS functions and classes
import {libs} from 'saffroncodejs'

StringFunctions

Full list of libs.StringFunctions functions:

clearDoubleQuartmarksOnJSON(str:string=“”):string
clearHTMLTags(ReferText:string=“”):string
clearSpacesAndTabs(str:string=“”):string
clearSpacesAndTabsAndArrows(str:string=“”)
compairFarsiString(str1:string=“”,str2:string=“”):number
correctInputString(str:string=“”):string
correctUTF(utfWord:string=“”):string
currancyPrint(inputcurencynumber:string):string
fileSizeInString(fileSizeInByte:number=0):string
findMainDomain(url:string=“”,removeHTTPPart:boolean=true):string
findPortOfURL(url:string=“”):number
generateLinks(str:string=“”,linkColors:number=-1):string
htmlCharacterEncoder(str:string=“”):string
isArabic(str:string=“”):boolean
isEmail(email:string=“”):boolean
isLocation(str:string=“”):boolean
isNullOrEmpty(value:string):boolean
isPersian(str:string=“”,stringLength:number=NaN):boolean
isURL(str:string=“”):boolean
jsonCorrector(oldJson:string=“”):string
KaafYe(str:string=“”):string
makeHTMLWithSize(pureHML:string=“”, defaultFontSize:number=0):string
numCorrection(str:string=“”):string
numToString(num:number,numberLenght:number=2):string
removeHTML(ReferText:string=“”):string
removeNumberFromBegining(str:string=“”):string
removeSpacesFromTwoSides(str:string=“”):string
returnLasNumberPartInInteger(str:string=“”):number
search(str:string=“”,searchedWord:string=“”,fineAll:boolean = true,arabic:boolean=false, arabic2:boolean=false)
short(str:string=“”,len:number=10,removeEntersWith:string=‘’)
stringToColor(str:string=“”):number
timeInString(seconds:number=0):string
utfToUnicode(utfString:string=“”):string

framework

import {framework} from 'saffroncodejs'

EventDispatcher

var dispatcher = new EventDispatcher();

//How to add and remove an EventListner on an dispatcher

dispatcher.addEventListner(type:string,trigger:(eventType?:string,param?:any)=>any):void;

//sample : dispatcher.addEventListner("LOGGED_IN",this.userIsLoggedIn)

dispatcher.removeEventListner(type:string,trigger:(eventType?:string,param?:any)=>any):void;

//sample : dispatcher.removeEventListner("LOGGED_IN",this.userIsLoggedIn)

//How to dispatch an event on your dispatcher

dispatcher.dispatchEvent(type:string,param:any=null):void;

//sample : dispatcher.dispatchEvent("LOGGED_IN",userTocken)

PageManager(ReactRouter’s Assist)

dispatcher:new EventDispatcher()

PAGE_CHANGED : "PAGE_CHANGED"

routerParamList:''

changePage:changePage

decodePageParams:decodePageParams

getCurrentPage:getCurrentPage

registerPage:registerPage

PageData

url:string;

pageName:string;

component?:React.ComponentClass;

pageData:any;

Download Details:

Author: SaffronCode

Source Code: https://github.com/SaffronCode/SaffronCodeJS

#react #reactjs #javascript