@tecsinapse/react-boilerplate

4.7.0
Need help reading this?

Boilerplate

Here are some helper components and functions for starting react projects

i18n

src/i18n/i18n.js

Provides support for internationalization

i18n(): Function
Returns
Function: Returns i18n ready for use (check https://www.npmjs.com/package/i18n )
Example
import { i18n } from '@tecsinapse/react-boilerplate/build/i18n/i18n';
import { Button } from '@tecsinapse/ui-kit';

export const ConfirmButton = <Button label={i18n._(t`Confirmar`)} />;

withI18nLanguage

src/i18n/withI18nLanguage.js

Composes support for multiple i18n languages

withI18nLanguage(Component: Element): Function
Parameters
Component (Element) Receives a react component
Returns
Function: Returns a context

init

src/index.js

This method initializes your react app, useful to replace defaults on index

init(props: object)
Parameters
props (object) Object containing all parameters to initialize the application for web
Name Description
props.hotjarId string Hotjar code for your app
props.analyticsCode string Google analytics code for tracking (default = null)
props.reduxOptions object Initial redux options (default = {})
props.reduxOptions.appState object Initial app state (default = null)
props.axiosOptions object Initial axios config (default = {})
props.apolloOptions object Initial apollo config (default = {})
props.apolloOptions.offlineApolloCacheOptions object Initial apollo cache config (default = null)
props.keycloakOptions object Initial KC config (default = {})
props.keycloakOptions.publicUrls object Initial public URL's (default = [])
props.sentryOptions object Initial sentry tracker config
props.idpHint string idpHint for kc login
props.renderFunction Function Render function
Example
init({
 analyticsCode: "AAAA",
 hotjarId: "BBBB",
 sentryOptions: {
   dsn: 'https://sentry.io/',
   release: process.env.REACT_APP_VERSION,
   environment: process.env.REACT_APP_HOST,
 },
 reduxOptions: {
   appState: store,
   middlewares: [middlewares],
 }
 axiosOptions: {
   axiosBaseUri: `http://localhost`,
   interceptors:{
      request: [ [successInterceptor1, errorInterceptor1], [successInterceptor2, errorInterceptor2] ],
      response: [ [successInterceptor3, errorInterceptor3], [successInterceptor4, errorInterceptor4] ],
   }
 },
 apolloOptions: {
   offlineApolloCacheOptions: null,
   uri: `http://localhost/api`,
   connectToDevTools: true,
 },
 keycloakOptions: {
   keycloakConfig: {},
   logoutFunction: () => {},
   publicUrls: ['/login'],
 },
 renderFunction: props => {
   ReactDOM.render(
     <Providers />,
     document.getElementById('root')
   );
 }
});

withKeycloak

src/keycloak/withKeycloak.js

Composes keycloack auth manager

withKeycloak(Component: Element): Function
Parameters
Component (Element) Receives a react component
Returns
Function: Returns a context

Providers

src/providers/Providers.js

This element provides all resources to children components

Providers
Parameters
props (object) Object containing all parameters to JSX component
Name Description
props.keycloak object Keycloack config
props.client object Apollo client config
props.store object Redux store provider
props.children object Children element to render
props.catalogs object (default {}) Object containing list of i18n languages available
props.themeVariant string (default 'orange') UI-KIT theme variant
props.language (string | null) (default null) Language being loaded on runtime
props.themeOverrides object (default {}) Object containing material-ui theme overrides
Returns
JSX.Element: React element
Example
<Providers
 themeVariant="orange"
 catalogs={{
   'pt-br': () => import(`./locales/pt-br/messages`),
   en: () => import(`./locales/en/messages`)
 }}
 themeOverrides={{
   MuiBadge: {
     badge: {
       backgroundColor: #FFF,
     }
   }
 }}
 {...props}
>
 <App />
</Providers>

showGlobalLoading

src/ui/globalLoading.js

This method render a loading circle at screen

showGlobalLoading()

hideGlobalLoading

src/ui/globalLoading.js

This method hides the loading circle at screen

hideGlobalLoading()

withSnackbarContext

src/ui/withSnackbarContext.js

Composes wrapper to use snackbar alerts

withSnackbarContext(Component: Element): Function
Parameters
Component (Element) Receives a react component
Returns
Function: Returns a context