Skip to main content
Version: 1.5.11

Installation

Install dependencies​

Add the necessary dependencies to your project.

npm i @stackhouseos/flower-client

Or

yarn add @stackhouseos/flower-client

Setup with Redux toolkit​


import { combineReducersWithFlower, flowerEnhancer } from '@stackhouseos/flower-client'

const store = configureStore({
  reducer: combineReducersWithFlower({...reducersListObject}),
  enhancers: [flowerEnhancer()],
})

With sagas custom​

import { combineReducersWithFlower, flowerEnhancer } from '@stackhouseos/flower-client'

const store = configureStore({
  reducer: combineReducersWithFlower({...reducersListObject}),
  enhancers: [flowerEnhancer([appSaga(), userSaga()])],
})

Add Flower reducer and saga, existing project​

Add Flower reducer to your root reducer.

import { flowerReducer } from '@stackhouseos/flower-client'
import { combineReducers } from 'redux'

const rootReducer = combineReducers({
  flower: flowerReducer
  // Other reducers...
})

Add Flower saga to your root saga.

import { flowerSaga } from '@stackhouseos/flower-client'
import { all } from '@redux-saga/core/effects'

function* rootSaga() {
  yield all([
    flowerSaga()
    // Other sagas...
  ])
}

Add your components to Flower​

Registry the components you want to use within Flower (see here how to create and configure them).

import {registerComponents} from '@stackhouseos/flower-client'
// Import your components

registerComponents({
  Text,
  Select,
  Input,
  Table
})

Enable developer tools​

To improve your experience while developing (i.e. live reload), import and call Devtools in your main file.

import { Devtools } from '@stackhouseos/flower-client'

if (isDev) Devtools({ port: 8770 })

Install the VS Code extension​

In VS Code, go to the Extensions tab and click on the three dots in the top right corner of the sidebar.

Click on "Install from VSIX..." and select the Flower extension .vsix file from your file system.