react-native-pretext v1.0.8

Pretext

Style your Text components using prefixes!

Pretext handles your styles inside the string itself, by adding styles based on a given string of 'prefixes'.

Checkout this link for a Live Demo.

Clone my test repo if you are having trouble using.

$ git clone https://github.com/ouoru/react-native-pretext-tests.git

Description

react-native-pretext allows you to intricately style Text Components.

This is NOT what you are looking for if:

• You want to manage a StyleSheet for your whole app

This may be what you are looking for if:

• You need to store and read styled Text components from a database
• You need different text styles in an individual string
• You use complex strings with variable text positions

Install

Install with npm:

$ npm i react-native-pretext

Usage

• Configure Context

import { Context } from 'react-native-pretext'

const defaultStyle = {
    fontFamily: 'MyFont',
    fontSize: 12,
    color: '#FFFFFF'
}

const context = {
    p: {
        color: 'purple'
    }
    r: {
        color: 'red'
    },
}

const config = {}

Context.give(defaultStyle, context, config)

• Use Pretext Component as you would use a Text Component, but add the styles you want as a Prefix.

import { Pretext } from 'react-native-pretext'

<Pretext>[p]Hello World!</Pretext>

• Pretext will style your text according to the context you initialized! In this case, defaultStyle is applied to the Text as well as the style of p in our context, color: 'purple'.

<Text style={{ fontFamily: 'MyFont', fontSize: 12, color: 'purple' }}>Hello World!</Text>

##Advanced Usage

• You can pass context props to a Pretext component to override your default settings.

<Pretext
    style={extraStyle}
    config={extraConfig}
>[p]Hello World!</Pretext>

API

defaultStyle

This is the style given to the parent Text Component

context

Your StyleSheet, Pretext will check if prefix exists in your context

• We recommend you to use the following guidelines when creating your StyleSheet for ease of use. Note that these are just recommendations, you may need different guidelines depending on what styles you are using. Our recommendations are just to make life easier.

config