react-lazy-style v0.1.1

react-lazy-style

react-lazy-style is a react native style library to speed up the development.

In the example i'm calling my div for View, You dont have to do this. You can make a Div component instend.

Installation

Install with npm

npm install react-lazy-style

Install with yarn

yarn add react-lazy-style

Usage

Create a style.js file

style.js

import React from 'react'
import initInline from 'react-lazy-style'
const inline = initInline({})

export const colors = {
  // add your style colors here if you want.
}

export const Text = ({ children, ...props }) => (
  <p {...inline(props)}>
    {children || null}
  </p>
)
export const View = ({ children, ...props }) => (
  <div {...inline(props)}>
    {children || null}
  </div>
)
export const Image = ({ children, ...props }) => (
  <img {...inline(props)} />
)

export const Span = ({ children, ...props }) => (
  <span {...inline(props)}>
    {children || null}
  </span>
)
export const Button = ({ children, ...props }) => (
  <button {...inline(props)}>
    {children || null}
  </button>
)

Example component

import React from 'react'
import { View, Text } from './style'

export default (onClick = () => console.log('no touch handler')) => (
    <View pointer onClick={onClick} s="bg:green|w:100|h:50|centerCenter|shadow:1">
      <Text>Green button</Text>
    </View>
)

Two ways

"s" prop

Its work by splitting a string by (|) and the args by (:). ex: w:400|h:200 = { width: 400, height: 200 }

<View s="w:400|h:200" >
</View>

use template string to add variables.

<View s={`w:400|h:${height}`} >
</View>

styling props

Works by adding the props to the component, not all props needs an arg, example the row prop.

<View w="200" row h="200">
</View>

Extending

In your style.js file you can extend the style functions.

In the example we are adding the style prop green.

import initInline from 'react-lazy-style'

const inline = initInline({
  'green': _ => ['backgroundColor', 'green']
})

In the example we are adding a multi style prop dp(default padding).

import initInline from 'react-lazy-style'

const inline = initInline({
  'dp': _ => [
    ['paddingLeft', 10],
    ['paddingRight', 10]
  ]
})

Contributing

Fell free to add a pull request to add more prestyle props.

read all the style props here.

License

MIT