Bappo-components NPM | npm.io

0.1.0-alpha.191 • Published 3 years ago

Install

Weekly downloads

63

License

MIT

Repository

Last release

3 years ago

bappo-components

bappo-components

Cross-platform React components for building Bappo apps

Installation

npm i --save bappo-components

And for react-native, install react-native-pdf

Usage

import React from 'react';
import { styled, Text, View } from 'bappo-components';

class MyComponent extends React.Component {
  render() {
    return (
      <Container>
        <Text>Hello World</Text>
      </Container>
    );
  }
}

const Container = styled(View)`
  flex: 1;
  background-color: white;
`;

Using built-in Icon components

Web (with webpack)

In webpack config file, use url-loader or file-loader to handle ttf files:

{
  test: /\.ttf$/,
  loader: 'url-loader',
  include: path.resolve(__dirname, 'node_modules/bappo-components'), // path to bappo-components
}

Then in your JavaScript entry point, inject a style tag:

import fontAwesome from 'bappo-components/fonts/FontAwesome.ttf';
const fontStyles = `@font-face { src:url(${fontAwesome});font-family: FontAwesome; }`;

// create stylesheet
const style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
  style.styleSheet.cssText = fontStyles;
} else {
  style.appendChild(document.createTextNode(fontStyles));
}

// inject stylesheet
document.head.appendChild(style);

iOS

Browse to node_modules/bappo-components and drag the folder fonts to your project in Xcode. Make sure your app is checked under "Add to targets" and that "Create groups" is checked.
Edit Info.plist and add a property called Fonts provided by application (or UIAppFonts if Xcode won't autocomplete/not using Xcode) and type in the files you just added. Note: you need to recompile your project after adding new fonts, also ensure that they also appear under Copy Bundle Resources in Build Phases.

Android

Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:

apply from: "../../node_modules/bappo-components/fonts.gradle"

To customize the files being copied, add the following instead:

project.ext.vectoricons: [
    iconFontNames: ["FontAwesome.ttf"] // Name of the font files you want to copy
]
apply from: "../../node_modules/bappo-components/fonts.gradle"

Update Docs

npm run release-storybook

Credits

This library is inspired by ReactXP and React Primitives.
This library's built-in Icon components are inspired by react-native-vector-icons.

@reach/tooltip es6-error exenv fbjs invariant lodash moment pdfmake prop-types react-native-keyboard-aware-scroll-view react-native-web react-recomponent react-select react-use warning

@everything-registry/sub-chunk-1214 @infinitebrahmanuniverse/nolb-bap

0.1.0-alpha.190

3 years ago

0.1.0-alpha.191

3 years ago

0.1.0-alpha.189

3 years ago

0.1.0-alpha.188

3 years ago

0.1.0-alpha.187

3 years ago

0.1.0-alpha.186

3 years ago

0.1.0-alpha.185

3 years ago

0.1.0-alpha.184

3 years ago

0.1.0-alpha.183

3 years ago

0.1.0-alpha.182

3 years ago

0.1.0-alpha.181

3 years ago

0.1.0-alpha.180

3 years ago

0.1.0-alpha.179

3 years ago

0.1.0-alpha.178

3 years ago

0.1.0-alpha.177

3 years ago

0.1.0-alpha.176

3 years ago

0.1.0-alpha.175

3 years ago

0.1.0-alpha.174

4 years ago

0.1.0-alpha.173

4 years ago

0.1.0-alpha.172

4 years ago

0.1.0-alpha.171

4 years ago

0.1.0-alpha.170

4 years ago

0.1.0-alpha.169

4 years ago

0.1.0-alpha.168

4 years ago

0.1.0-alpha.167

4 years ago

0.1.0-alpha.166

4 years ago

0.1.0-alpha.165

4 years ago

0.1.0-alpha.164

4 years ago

0.1.0-alpha.163

4 years ago

0.1.0-alpha.162

4 years ago

0.1.0-alpha.161

4 years ago

0.1.0-alpha.160

4 years ago

0.1.0-alpha.159

4 years ago

0.1.0-alpha.158

4 years ago

0.1.0-alpha.157

4 years ago

0.1.0-alpha.156

4 years ago

0.1.0-alpha.155

4 years ago

0.1.0-alpha.154

4 years ago

0.1.0-alpha.153

4 years ago

0.1.0-alpha.152

4 years ago

0.1.0-alpha.151

4 years ago

0.1.0-alpha.150

4 years ago

0.1.0-alpha.149

4 years ago

0.1.0-alpha.148

4 years ago

0.1.0-alpha.147

4 years ago

0.1.0-alpha.146

4 years ago

0.1.0-alpha.145

4 years ago

0.1.0-alpha.143

4 years ago

0.1.0-alpha.144

4 years ago

0.1.0-alpha.141

4 years ago

0.1.0-alpha.142

4 years ago

0.1.0-alpha.140

4 years ago

0.1.0-alpha.139

4 years ago

0.1.0-alpha.138

4 years ago

0.1.0-alpha.137

4 years ago

0.1.0-alpha.136

4 years ago

0.1.0-alpha.135

4 years ago

0.1.0-alpha.134

4 years ago

0.1.0-alpha.133

4 years ago

0.1.0-alpha.132

4 years ago

0.1.0-alpha.131

4 years ago

0.1.0-alpha.130

4 years ago

0.1.0-alpha.128

4 years ago

0.1.0-alpha.129

4 years ago

0.1.0-alpha.127

4 years ago

0.1.0-alpha.126

4 years ago

0.1.0-alpha.125

5 years ago

0.1.0-alpha.124

5 years ago

0.1.0-alpha.123

5 years ago

0.1.0-alpha.122

5 years ago

0.1.0-alpha.121

5 years ago

0.1.0-alpha.120

5 years ago

0.1.0-alpha.118

5 years ago

0.1.0-alpha.117

5 years ago

0.1.0-alpha.116

5 years ago

0.1.0-alpha.115

5 years ago

0.1.0-alpha.114

5 years ago

0.1.0-alpha.113

5 years ago

0.1.0-alpha.112

5 years ago

0.1.0-alpha.111

5 years ago

0.1.0-alpha.110

5 years ago

0.1.0-alpha.109

5 years ago

0.1.0-alpha.108

5 years ago

0.1.0-alpha.107

5 years ago

0.1.0-alpha.106

5 years ago

0.1.0-alpha.105

5 years ago

0.1.0-alpha.104

5 years ago

0.1.0-alpha.103

5 years ago

0.1.0-alpha.102

5 years ago

0.1.0-alpha.101

5 years ago

0.1.0-alpha.100

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago