Directive-X
Directives for JSX
Directive-X is a JSX extension that simplifies coding in JSX. It uses Babel to transpile its 'xProps' (that manipulate JSX element structures).
Getting Started
Installation
Install package via npm
:
npm install directive-x --save-dev
Since Directive-X is a Babel plugin, you'll need to include it in your .babelrc
file:
"plugins": "es2015" "react-preset" "directive-x"
You may also include it in your package.json
file if you prefer that way.
Usage
Directive-X allows you to write better JSX by allowing you to avoid common curfews that beginners find to be annoying about JSX. Check this:
xRepeat
The xRepeat
directive/prop allows you to iterate arrays the same way ng-repeat
does. However, after it is transpiled, it achieves this through a declarative method by making use of Array.map()
function. Check the following example:
const ContactList = { return <View xRepeat=contact in usercontacts> <Image source=contactavatarThumbSrc style=stylesavatar /> <Link to=`/chat/`>contactusername</Link> </View> }
The above code get's transpiled to:
const ContactList = { return usercontacts;};
xIf
The xIf
directive displays the element it belongs to if the given condition is true
. This allows for quick control logic. Eg:
<Text xIf=loggedIn>username</Text>
The above code would be transpiled to:
loggedIn ? <Text>username</Text> : null;
xBind
The xBind
directive handles the binding of this
to all events on the element that it is given. eg:
{/*...*/} {/*...*/} { return <View xBind onClick= this> <Text xBind=SomeComp onHover=thishandleHover children="Click me" /> </View> }
The above script will be transpiled to the following:
{ thishandleClick = thishandleClick; thishandleHover = thishandleHover; } { this; } {/*...*/} {/*...*/} { return <View xBind onClick= this> <Text xBind=SomeComp onHover=thishandleHover children="Click me" /> </View>; }
Notice that the xBind
directive accepts one arg that defaults to this
, it then binds that arg to all the events of the element it belongs to. If no constructor
method exists in the class, the xBind
directive creates one. Without Directive-X's xBind
prop, the above code would've seem more tedious.
xGet
The purpose of the xGet
directive is to require data/objects from external files and import them in an encapsulated scope to be used by the component it belongs to. Eg:
<Text xGet= red dark yellow in './theme/colors' style= backgroundColor: red color: dark boxShadow: `1px 2px 2px ` padding: '7px 12px' children="Hello, World"/>
Contributing
Directive-X is an open source library, and I'd appreciate any help you're willing to give - be it fixing bugs, improving documentation, or suggesting new features or enhancements.
License
Directive-X is licensed under the MIT License which makes it great for both personal and commercial use.
Enjoy ;)