Asterix-react NPM

Asterix

View components-library for React

Asterix render fully customizable views from a single component. While Bootstrap and other CSS frameworks are great to speed up web development it is not enough, they lack native DB support.

Asterix closes the bridge between web development and product development. This is framework to get up to speed on your projects and get your product in front of the user, as soon as possible.

Features

Fully written in React and TypeScript. Ideal for feeding props or forking the library.
Enhanced Style with Bulma CSS framework and following Atomic Design principles.
Serverless MongoDB integration with minimal configuration.

Components

Sign Up form component, with support for PasswordLess user creation in a single line of code.
CRUD Model, that renders 5 views: list, detail, create, update & delete to fully manage your database, by only defining your DB model.

Usage

Using a custom createUser method, simply render a SignUp component:

import React from 'react'

import { SignUp } from 'asterix'
import 'asterix/dist/index.css'


const App = () => <SignUp 
    signUp={(email, pwd)=> createUser(email, pwd)} 
/>


export default App

It will look like:

Available props: title, form, button, passwordLess & signUp.

DB Integration

To fully take advantage of the CRUD Model component, create a free account on MongoDB Atlas and set-up a Stitch project.

After creating a collection and giving permissions to your app supply the props to the component:

import React from 'react'

import { Model } from 'asterix'
import 'asterix/dist/index.css'


const App = () => <Model 
    name = {'To Do'}
    fields = {[{name: 'name'}, {name: 'title'}]}
    DB = {{ 
        app: process.env.REACT_APP_MONGO_APP, 
        name: process.env.REACT_APP_MONGO_DB, 
        collection: process.env.REACT_APP_COLLECTION
    }} 
/>


export default App