---------------------------------------------
### PROOF OF CONCEPT, DO NOT USE IN PRODUCTION! ⚠️
## Install
Using NPM
```sh
npm install rxn-grife
```
Using Yarn
```sh
yarn add rxn-grife
```
🌐 Using this module for Web?
Don't forget to setup [react-native-web](https://github.com/necolas/react-native-web)
## Example
- [Expo Snack Example ☁️](https://snack.expo.dev/@runtothedoor/rxn-grife-example)
- [CodeSandbox Example ☁️](https://codesandbox.io/s/rxn-grife-example-react-native-web-46pfld?file=/src/styles.ts)
## Usage
### styles.ts
```typescript
import {
makeStyle,
makeStyleFrom as from
} from 'rxn-grife';
export const Root = from.View((el) => {
el.style.set({
width: '100%',
height: '100%'
});
});
export const myStyle = makeStyle((el) => {
el.children.map((c) => {
c.recursive.map((i) => i.style.set({color: 'white'}));
if (c.type == 'View') {
c.style.set({
justifyContent: "center",
alignItems: "center"
});
}
});
});
export const MyView = from.View((el) => {
el.children.map((c) => {
if (c.type == 'Text') {
c.style.set({color: 'green');
}
});
});
```
### index.tsx
```tsx
import React, { useCallback } from 'react';
import { View } from 'react-native';
// Text with extra pseudo-props (just declaration) of id and className
// while "With" is an unique Grife's component serving as styling wrapper
import { With as W, Text } from 'rxn-grife';
import { Root, myStyle } from './styles.ts';
const Foo = () => {
return (
Hello World
How are you?
I'm Green
);
};
```
## Components (allowing id and className props)
- ScrollView
- Text
- View
``OBS: You still can use default React Native's components, these just add extra pseudo-props (declaration only of id and className).``
## makeStyle Methods
- ``makeStyle``
creates style group without an base root element (needs to use ```{...}```). NOT WORKING YET
- ``makeStyleFrom``
Use any React Native's component as base (similar to styled-components's styled function)
## Elements method (when styling)
- ```element.type```- element's type (displayName or name)
- ```element.style.set()```- set styles (overwriting) for element (also ignoring inline styles)
- ```element.style.pushBefore()```- push styles for element before already defined styles (less important)
- ```element.style.pushAfter()```- push styles for element after already defined styles (more important)
- ```element.id```- id defined on props
- ```element.className```- className defined on props
BETTER DOCS SOON...
## FAQ
Why RXN Grife as a name?
> RXN is a acronym for "React x Native" (Libraries aimed at a React Native system targeting Web as well), while Grife is a Brazilian Portuguese word for "designer label".
## Contributors
## 📄 License
MIT - This module was built with ❤️ by [Luffos](https://github.com/Luffos)
Feel free for modify, edit, copy, fork and share