PowerCMS - React kit

React-kit is a wrapper for redux, containing all actions, reducers and containers, that you need to build your own front-end for the PowerCMS based website. You don't have to care about api requests, authorization or form validation - just wrap your components with proper react-kit's containers and focus on creating beautiful presentation layer!

How to install?

npm install --save @power-cms/react-kit

How to use?

1. Wrap your application with <Store /> component
2. Use containers to provide proper data and methods

import { settingsContainer, siteContainer, Store } from '@power-cms/react-kit';
import React, { Component } from 'react';
import { Navigation } from './components/Navigation';
import { Sites } from './components/Sites';

const apiUrl = 'http://localhost:3000/api';

export class App extends Component {
  public render() {
    const SitesComponent = siteContainer.getAll(Sites);
    const NavigationComponent = settingsContainer.get(Navigation);

    return (
      <Store reducers={['auth', 'site', 'form', 'settings']} apiUrl={apiUrl}>
        <NavigationComponent />
        <SitesComponent />
      </Store>
    );
  }
}

Documentation

Sites

import { siteContainer } from '@power-cms/react-kit';

Available methods:

[getAll, create, update]

Users

import { userContainer } from '@power-cms/react-kit';

Available methods:

[getAll, update]

Settings

import { settingsContainer } from '@power-cms/react-kit';

Available methods:

[get, update]

Actions description

getAll

Responsible for fetching all collection data. Includes also pagination payload and delete method.

Received props:
data - data collection array
isLoading - data loading flag
pagination - pagination data
getData(page) - fetch data method - needs to be run when componentDidMount
delete(siteId) - delete method

get

Responsible for fetching single resource.

Received props:
data - single resource instance
isLoading - data loading flag
getData() - fetch data method - needs to be run when componentDidMount

create

Responsible for creating new resource.

Receives all necessary props to use redux-form

update

Responsible for updating a single resource. Includes also delete method.

Receives all necessary props to use redux-form and:
getData(page) - fetch data method - needs to be run when componentDidMount
delete(siteId) - delete method

License

Copyright © 2019 by Szymon Piecuch under ISC license.