1 of 55

trixta-js-core

Overview

trixta-js-core is a javascript library to help any organization, easily connect to a Trixta space, build front-end components for you application. It leverages to communicate with Trixta and gives you a variety of tools / utilities to build react components.

Welcome to trixta-js-core

Welcome to trixta-js-core! Here you'll find all the documentation you need to get up and running with the trixta-js-core

Want to deep dive?

Dive a little deeper and start exploring our API reference to get an idea of everything that's possible with the package:

Installation

You can install trixta-js-core with NPM or Yarn

Using Yarn Package Manager is recommended over npm.

yarn add @trixtateam/trixta-js-core @trixtateam/phoenix-to-redux

npm i @trixtateam/trixta-js-core @trixtateam/phoenix-to-redux

Quick Start

This example will quickly connect your react application to a Trixta space

1. Setup Reducer

/**
 * Combine all reducers in this file and export the combined reducers.
 */

import { combineReducers } from '@reduxjs/toolkit';
import { phoenixReducer } from '@trixtateam/phoenix-to-redux';
import { trixtaReducer } from '@trixtateam/trixta-js-core-core';
export default function createReducer() {
  const rootReducer = combineReducers({
    trixta: trixtaReducer,
    phoenix: phoenixReducer,
  });
  return rootReducer;
}

2. Setup Middleware

Read up on setting up middleware

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { createPhoenixChannelMiddleware } from '@trixtateam/phoenix-to-redux';
import createSagaMiddleware from 'redux-saga';
import { createReducer } from './reducers';

export default function configureStore() {
  const reduxSagaMonitorOptions = {};
  // Makes redux connected to phoenix channels
  const phoenixChannelMiddleWare = createPhoenixChannelMiddleware();
  const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);
  // Create the store with saga middleware
  const middlewares = [sagaMiddleware,phoenixChannelMiddleWare];

   const enhancers = [];

  const store = configureStore({
    reducer: createReducer(),
    middleware: [
      ...getDefaultMiddleware({
        thunk: false,
        immutableCheck: {
          ignore: ['socket', 'channel', 'trixta', 'phoenix', 'router'],
        },
        serializableCheck: false,
      }),
      ...middlewares,
    ],
    devTools:
      /* istanbul ignore next line */
      process.env.NODE_ENV !== 'production' ||
      process.env.PUBLIC_URL.length > 0,
    enhancers,
  });

   return store;
}

3. Setup Trixta Saga

Read up on redux-saga

Option 1

If your not planning to use any other sagas, you can simple use the one from trixta-js-core

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { createPhoenixChannelMiddleware } from '@trixtateam/phoenix-to-redux';
import createSagaMiddleware from 'redux-saga';
import { setupTrixtaSaga } from '@trixtateam/trixta-js-core';
import createReducer from './reducers';

export default function configureStore() {
  const reduxSagaMonitorOptions = {};
  // Makes redux connected to phoenix channels
  const phoenixChannelMiddleWare = createPhoenixChannelMiddleware();
  const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);
  const middlewares = [sagaMiddleware,phoenixChannelMiddleWare];

  const enhancers = [];

  const store = configureStore({
    reducer: createReducer(),
    middleware: [
      ...getDefaultMiddleware({
        thunk: false,
        immutableCheck: {
          ignore: ['socket', 'channel', 'trixta', 'phoenix', 'router'],
        },
        serializableCheck: false,
      }),
      ...middlewares,
    ],
    devTools:
      /* istanbul ignore next line */
      process.env.NODE_ENV !== 'production' ||
      process.env.PUBLIC_URL.length > 0,
    enhancers,
  });

  sagaMiddleware.run(setupTrixtaSaga);

  return store;
}

Option 2

If you plan on using your own sagas, then you should create a root saga and include the one from trixta-js-core

import { put, select, takeLatest, takeEvery, fork } from 'redux-saga/effects';
import { setupTrixtaSaga } from '@trixtateam/trixta-js-core';

export default function* rootSaga() {
  yield fork(setupTrixtaSaga);
}

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { createPhoenixChannelMiddleware } from '@trixtateam/phoenix-to-redux';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './rootSaga';
import createReducer from './reducers';

export default function configureStore() {
   const reduxSagaMonitorOptions = {};
  // Makes redux connected to phoenix channels
  const phoenixChannelMiddleWare = createPhoenixChannelMiddleware();
  const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);
  const middlewares = [sagaMiddleware,phoenixChannelMiddleWare];

  const enhancers = [];

  const store = configureStore({
    reducer: createReducer(),
    middleware: [
      ...getDefaultMiddleware({
        thunk: false,
        immutableCheck: {
          ignore: ['socket', 'channel', 'trixta', 'phoenix', 'router'],
        },
        serializableCheck: false,
      }),
      ...middlewares,
    ],
    devTools:
      /* istanbul ignore next line */
      process.env.NODE_ENV !== 'production' ||
      process.env.PUBLIC_URL.length > 0,
    enhancers,
  });

  sagaMiddleware.run(rootSaga);

  return store;
}

4. Connect to Trixta

Option 1

Using the useTrixtaSpace hook

import * as React from 'react';
import { useTrixtaSpace } from '@trixtateam/trixta-js-core';
import Providers from './Providers';
import Routes from './Routes';


export function App() {
   useTrixtaSpace({ space: 'trixta-demo.space.trixta.io', params: {}});
  
return (<Providers>
      <Routes />
    </Providers>)

}

export default App;

Option 2

Using a saga

import { put, select, takeLatest, takeEvery, fork } from 'redux-saga/effects';
import { connectTrixta } from '@trixtateam/trixta-js-core';

export function* connectTrixtaSaga() {
  yield put(connectTrixta({ space: 'trixta-demo.space.trixta.io'}));
}

export default function* rootSaga() {
  yield fork(setupTrixtaSaga);
  yield call(connectTrixtaSaga);
}

Reference

Types

All types mentioned in the docs can be found here.

Action Related Types

See types related to Trixta Actions

see details regarding a Trixta Action

Reaction Related Types

See types related to Trixta Reactions

See details regarding a Trixta Reaction

Other Types

See types that are not related to Trixta Actions or Trixta Reactions

Methods

Here you can find information all the react methods that you can dispatch.

Please note all methods need to be dispatched to the redux store either using the

useDispatch hook, the dispatch store function or the put effect in a Saga

Reactions

Trixta reaction related methods can be found here.

submitTrixtaReactionResponse

This method will attempt to respond to a Trixta Reaction for the given roleName and reactionName

import {
  submitTrixtaReactionResponse
} from '@trixtateam/trixta-js-core';

Please note your reaction must be a request for response to use this method.

Parameters

Parameter

Description

Type

roleName

Trixta role name

string

reactionName

Trixta reaction name

string

ref

Unique Trixta reaction reference. Can be found on a

string

responseEvent

Redux event for data to dispatch response to

string?

requestEvent

Redux event for data to dispatch to before submitting request to Trixta

string?

timeoutEvent

Redux event for data to dispatch error response due to timeout

string?

errorEvent

Redux event for data to dispatch error response to

string?

loadingStatusRef

Optional value to change the default isInProgress behaviour for when submitting reactions.

If you plan to use the same reaction name for the same role, on the same screen, this is when you would make use of this * property

string?

timeout

timeout in milliseconds for submitting data to Trixta, default is 15000

number?

extraData

Extra data to pass on and receive in response with the key extraData. This can be used as needed.

any

clearTrixtaReactionResponse

This method will attempt to clear a responses in the Trixta Reducer for the given roleName and reactionName

import {
  clearTrixtaReactionResponse
} from '@trixtateam/trixta-js-core';

Parameters

Parameter

Description

Type

roleName

Trixta role name

string

reactionName

Trixta reaction name

string

loadingStatusRef

see

string?

clearTrixtaReactionRequestStatus

This method will attempt to reset the progress status in the Trixta Reducer for the given roleName and reactionName

import {
  clearTrixtaReactionRequestStatus
} from '@trixtateam/trixta-js-core';

Parameters

Parameter

Description

Type

roleName

Trixta role name

string

reactionName

Trixta reaction name

string

loadingStatusRef

see

string?

Actions

Trixta action related methods can be found here.

submitTrixtaActionResponse

This method will attempt to send a request to the given roleName and actionName

import {
  submitTrixtaActionResponse
} from '@trixtateam/trixta-js-core';

Parameters

Parameter

Description

Type

roleName

Trixta role name

string

actionName

Trixta action name

string

actionOptions

Options for action in Trixta flow

any

debugOptions

Trixta flow debugging options

debugMode

Enables debugging for action in Trixta flow. False by default

boolean?

responseEvent

Redux event for data to dispatch response to

string?

requestEvent

Redux event for data to dispatch to before submitting request to Trixta

string?

timeoutEvent

Redux event for data to dispatch error response due to timeout

string?

errorEvent

Redux event for data to dispatch error response to

string?

loadingStatusRef

Optional value to change the default isInProgress behaviour for when submitting actions.

If you plan to use the same action name for the same role, on the same screen, this is when you would make use of this * property

string?

timeout

timeout in milliseconds for submitting data to Trixta, default is 15000

number?

extraData

Extra data to pass on and receive in response with the key extraData. This can be used as needed.

any

clearResponse

Determines if the instances for action should be cleared before submitting. False by default

boolean?

formData

Data to submit to Trixta

any

clearTrixtaActionResponse

This method will attempt to clear a responses in the Trixta Reducer for the given roleName and actionName

import {
  clearTrixtaActionResponse
} from '@trixtateam/trixta-js-core';

Parameters

Parameter

Description

Type

roleName

Trixta role name

string

actionName

Trixta action name

string

loadingStatusRef

see

string

clearTrixtaActionRequestStatus

This method will attempt reset the progress status in the Trixta Reducer for the given roleName and actionName

import {
  clearTrixtaActionRequestStatus
} from '@trixtateam/trixta-js-core';

Parameters

Parameter

Description

Type

roleName

Trixta role name

string

actionName

Trixta action name

string

loadingStatusRef

see

string

updateTrixtaRole

This method will attempt to join the given Trixta Role on connected Trixta Space

import {
  updateTrixtaRole
} from '@trixtateam/trixta-js-core';

Parameters

Parameter

Description

Type

name

Trixta role name

string

logPresence

determines if phoenix channel presence for role should be logged

boolean

additionalData

Any additional data to pass on joining a role

any

updateTrixtaRoles

This method will attempt to join the given Trixta Roles on connected Trixta Space

import {
  updateTrixtaRoles
} from '@trixtateam/trixta-js-core';

Parameters

Parameter

Description

Type

roles

Array of Trixta roles to join

Array<>

removeTrixtaRole

This method will attempt to leave the given Trixta Role on connected Trixta Space

import {
  removeTrixtaRole
} from '@trixtateam/trixta-js-core';

Parameters

Parameter

Description

Type

name

Trixta role name

string

connectTrixta

This method will attempt to connect to the passed Trixta space and optional params

import {
  connectTrixta
} from '@trixtateam/trixta-js-core';

Parameters

Parameter

Description

Type

space

to connect to

string

params

Any optional params when connect to the Trixta space

any

signoutTrixta

This method will attempt to initialize all Trixta State in the reducer

import {
  signoutTrixta
} from '@trixtateam/trixta-js-core';

Parameters

None

Saga Methods

Here you will find all saga helper methods.

respondToTrixtaReactionEffectSaga

Will listen for a Trixta reaction for the given roleName and reactionName, dispatching the data to actionToDispatch or dispatchResponseTo parameters

Option 1

export const EXAMPLE_RESPONSE = 'app/EXAMPLE_RESPONSE';
export function functionToDispatch(payload) {
  return {
    type: EXAMPLE_RESPONSE,
    payload,
  }
}

import { fork } from '@redux-saga/core/effects';
import { respondToTrixtaReactionEffectSaga } from '@trixtateam/trixta-js-core';

export default function* defaultSaga() {
  yield fork(respondToTrixtaReactionEffectSaga, {
    roleName: "",
    reactionName: "",
    actionToDispatch: functionToDispatch,
  });
  
}

Option 2

import { fork } from '@redux-saga/core/effects';
import { respondToTrixtaReactionEffectSaga } from '@trixtateam/trixta-js-core';

export const EXAMPLE_RESPONSE = 'app/EXAMPLE_RESPONSE';

export default function* defaultSaga() {
  yield fork(respondToTrixtaReactionEffectSaga, {
    roleName: "",
    reactionName: "",
    dispatchResponseTo: EXAMPLE_RESPONSE,
  });
  
}

Parameter

Description

Type

roleName

Trixta role name

string

reactionName

Trixta reaction name

string

actionToDispatch

Redux action creator function to dispatch response to

Function(payload) => ({ type:string; payload})

dispatchResponseTo

Name of event to dispatch response to

string

listenForTrixtaReactionResponse

This helper method will return the react redux dispatch event for a given roleName and reactionName. This can be used to listen for reactions in saga using the takeEvery effect

Example

export const EXAMPLE_RESPONSE = 'app/EXAMPLE_RESPONSE';
export function functionToDispatch(payload) {
  return {
    type: EXAMPLE_RESPONSE,
    payload,
  }
}

import { put,takeEvery } from 'redux-saga/effects';
import { listenForTrixtaReactionResponse } from '@trixtateam/trixta-js-core';

export default function* checkReactionSaga({ meta, reactionDetails }) {
  const { reactionDetails } = payload;
  const { reactionName, roleName } = meta;

  if(reactionName === 'name of Trixta reaction'){
    yield put(functionToDispatch(reactionDetails.initial_data));
  }
}

export default function* globalSaga() {
yield takeEvery(listenForTrixtaReactionResponse({
  roleName: // name of Trixta role
  reactionName: // name of Trixta reaction
}),checkReactionSaga);
}

Parameter

Description

Type

roleName

Trixta role name

string

reactionName

Trixta reaction name

string

Components

Here you can find information on all the react components.

Reactions

Trixta reaction related components can be found here.

TrixtaReactionComponent

React component used to pass Trixta Reaction Props to your child component or function.

Please note if your reaction is a request for response, the property requestForEffect must be false

import {
  TrixtaReactionComponent,
  TrixtaReactionComponentArgs
} from '@trixtateam/trixta-js-core';

<TrixtaReactionComponent
  roleName=""
  reactionName=""
  includeResponse={false}
  initialData={}
  extraData={}
  requestForEffect={false}
  defaultComponent={<Component/>}
  debugMode={false}
  requestEvent=""
  responseEvent=""
  errorEvent=""
  timeoutEvent=""
  timeout={1500}
  setTimeoutEventAsErrorEvent={false}
>
  {({
    submit,
    isInProgress,
    loading,
    instance,
    response,
    data,
  }: TrixtaReactionComponentArgs<
    TInitialData,TFormDataType,TSuccessType,TErrorType
  >) => (
    {function | <component />}
  )}
</TrixtaReactionComponent>

Props

RespondToReactionComponent

React component used to respond to the latest Trixta reaction effect or response when shouldRespond is true, by dispatching the response / initialData to actionToDispatch or dispatchResponseTo props.

Please note if your reaction is a request for response, the property requestForEffect must be false

export function functionToDispatch(payload) {
  return {
    type: '',
    payload,
  }
}

import {
  RespondToReactionComponent,
} from '@trixtateam/trixta-js-core';

<RespondToReactionComponent
  roleName=""
  reactionName=""
  formData={}
  shouldRespond={false}
  actionToDispatch={functionToDispatch}
  dispatchResponseTo=""
  requestForEffect={false}
/>

Props

RespondToReactionsComponent

React component used to respond to many Trixta reaction effect or response by dispatching the response / initialData to actionToDispatch or dispatchResponseTo props.

Please note if your reaction is a request for response, the property requestForEffect must be false

export function functionToDispatch(payload) {
  return {
    type: '',
    payload,
  }
}

import {
  RespondToReactionsComponent,
} from '@trixtateam/trixta-js-core';

<RespondToReactionsComponent
  roleName=""
  reactions={[{name,actionToDispatch,dispatchResponseTo,requestForEffect}]}
/>

Props

TrixtaReactionResponseComponent

React component used to pass Trixta Reaction Response Props to your child component or function.

Please note a reaction response is only viable, if the requestForEffect property is false

import {
  TrixtaReactionResponseComponent,
  TrixtaReactionComponentArgs
} from '@trixtateam/trixta-js-core';

<TrixtaReactionResponseComponent
  roleName=""
  reactionName=""
  debugMode={false}
>
  {({
    isInProgress,
    loading,
    instance,
    response,
    data,
  }: TrixtaReactionComponentArgs<
    TInitialData,TFormDataType,TSuccessType,TErrorType
  >) => (
    {function | <component />}
  )}
</TrixtaReactionResponseComponent>

Props

Actions

Trixta action related components can be found here.

TrixtaActionComponent

React component used to pass Trixta Action Props to your child component or function.

import {
  TrixtaActionComponent,
  TrixtaActionComponentArgs
} from '@trixtateam/trixta-js-core';

<TrixtaActionComponent
  roleName=""
  actionName=""
  initialData={}
  extraData={}
  debugOptions={}
  debugMode={false}
  requestEvent=""
  responseEvent=""
  errorEvent=""
  timeoutEvent=""
  timeout={1500}
  setTimeoutEventAsErrorEvent={false}
  actionOptions={}
>
  {({
    submit,
    isInProgress,
    instances,
    response,
    initialData,
  }: TrixtaActionComponentArgs<
    TFormDataType,TSuccessType,TErrorType
  >) => (
    {function | <component />}
  )}
</TrixtaActionComponent>

Props

TrixtaActionResponseComponent

React component used to pass Trixta Action Response Props to your child component or function.

import {
  TrixtaActionResponseComponent,
  TrixtaActionResponseComponentArgs
} from '@trixtateam/trixta-js-core';

<TrixtaActionResponseComponent
  roleName=""
  actionName=""
  debugMode={false}
>
  {({
    instance,
    response,
  }: TrixtaActionResponseComponentArgs<
    TSuccessType,TErrorType
  >) => (
    {function | <component />}
  )}
</TrixtaActionResponseComponent>

Props

TrixtaAuthComponent

React component used to only render a child component or function, if you have access to the passed roleName.

import {
  TrixtaAuthComponent,
} from '@trixtateam/trixta-js-core';

<TrixtaAuthComponent 
 roleName=""
>
{children}
</TrixtaAuthComponent>

Props

Hooks

Here you can find information on all the react hooks.

Reactions

Trixta reaction related hooks can be found here.

useTrixtaReaction

React hook used to interact with a Trixta reaction for a given roleName.

import { useTrixtaReaction } from '@trixtateam/trixta-js-core';
const { 
hasRoleAccess,
isInProgress,
latestResponse,
loading,
latestInstance,
instances,
initialData,
hasResponse,
submitTrixtaReaction,
clearReactionResponses,
} = useTrixtaReaction<TInitialData,TSuccessType,TErrorType>({ roleName:"",
  reactionName:"",
  requestForEffect:false,
  loadingStatusRef:"",
  debugMode: false,
  setTimeoutEventAsErrorEvent: false,
  clearResponsesOnCallback: false,
  onSuccess:(success)=>{},
  onError:(errror)=>{}
   });

Options

roleName : string
- Required
- Trixta role name
reactionName : string
- Required
- Trixta reaction name
requestForEffect: boolean
- Optional
- Defaults to false.
- If set to true, this Trixta reaction is not waiting for a response and the only expect to use the initialData
loadingStatusRef: string
- Optional
- Optional value to change the default isInProgress behaviour for when submitting reactions. If you plan to use the same reaction name for the same role, on the same screen, this is when you would make use of this * property
debugMode: boolean
- Optional
- Defaults to false.
- If set to true, enables Trixta console debugging
setTimeoutEventAsErrorEvent: boolean
- Optional
- Defaults to false.
- If set to true, will set the timeoutEvent to be the same as the errorEvent
clearResponsesOnCallback: boolean
- Optional
- Defaults to false.
- If set to true, will clear all responses when onSuccess or onError callbacks are called returning a value true
onSuccess : (success: TSuccessType) => void|boolean
- Optional
- This function will fire any time a successful response is received from Trixta.
- If you return true and clearResponsesOnCallback is true, all responses will be cleared.
onError : (error: TErrorType) => void|boolean
- Optional
- This function will fire any time an error response is received from Trixta.
- If you return true and clearResponsesOnCallback is true, all responses will be cleared.

Returns

hasRoleAccess : boolean
- Will be true if the roleName has access for this user.
isInProgress : boolean
- Will be true if there is no response yet after calling submitTrixtaReactionResponse or submitTrixtaReaction.
- Will be false if there is a response after calling submitTrixtaReactionResponse or submitTrixtaReaction
hasResponse : boolean
- Will be true if there is at least one Trixta Instance response.
loading : boolean
- Will be true if the reaction is waiting to be loaded or receive a reaction.
latestResponse : TrixtaReactionInstanceResponse
- First or most recent Trixta instance response
initialData : TInitialData on TrixtaReactionInstance
- Initial data returned from Trixta reaction instance
latestInstance : TrixtaReactionInstance
- First or most recent Trixta instance
submitTrixtaReaction : (parameters: SubmitTrixtaFunctionParameters) => void
- This function will submit a response for the given roleName and reactionName
clearReactionResponses : () => void
- This function will clear and reset responses for the given roleName and reactionName.

useRespondToReactionEffect

React hook used to interact with a Trixta reaction that does not require a response for a given roleName. Will trigger the callBack when a reaction is received.

import { useRespondToReactionEffect } from '@trixtateam/trixta-js-core';
const { 
hasRoleAccess,
} = useRespondToReactionEffect<TInitialData>({ 
  roleName:"",
  reactionName:"",
  callBack: (payload?: TInitialData) => {},
  debugMode: false,
   });

Options

roleName : string
- Required
- Trixta role name
reactionName : string
- Required
- Trixta reaction name
debugMode: boolean
- Optional
- Defaults to false.
- If set to true, enables Trixta console debugging
callBack : (payload: TInitialData) => void
- Required
- This function will fire any time a reaction is received from Trixta.

Returns

hasRoleAccess : boolean
- Will be true if the roleName has access for this user.

useRespondToReactionResponse

React hook used to interact with a Trixta reaction that does require a response for a given roleName. Will trigger the callBack when a reaction is received.

import { useRespondToReactionResponse } from '@trixtateam/trixta-js-core';
const { 
hasRoleAccess,
latestInstance,
respondToReaction
} = useRespondToReactionResponse<TInitialData>({ 
  roleName:"",
  reactionName:"",
  debugMode: false,
   });

Options

roleName : string
- Required
- Trixta role name
reactionName : string
- Required
- Trixta reaction name
debugMode: boolean
- Optional
- Defaults to false.
- If set to true, enables Trixta console debugging

Returns

hasRoleAccess : boolean
- Will be true if the roleName has access for this user.
latestInstance : TrixtaReactionInstance
- First or most recent Trixta instance
respondToReaction : (parameters: { data, instance, responseEvent, errorEvent }) => void
- Required
- This function will respond to the reaction with the data for the given parameters that is received from Trixta.

Actions

Trixta action related hooks can be found here.

useTrixtaAction

React hook used to interact with a Trixta action for a given roleName.

import { useTrixtaAction } from '@trixtateam/trixta-js-core';
const { 
hasRoleAccess,
isInProgress,
hasResponse,
loading,
latestInstance,
response,
submitTrixtaAction,
clearActionResponses,
} = useTrixtaAction<TSuccessType,TErrorType>({ roleName:"",
  actionName:"",
  actionParameters:{
    data:{},
    extraData:{},
    timeout:1500,
    timeoutEvent:"",
    loadingStatusRef:"",
    requestEvent:"",
    responseEvent:"",
    errorEvent:""
  },
  loadingStatusRef:"",
  options: {
    debugMode: false,
    autoSubmit: false,
    setTimeoutEventAsErrorEvent: false,
    clearResponsesOnCallback: false,
  },
  onSuccess:(success)=>{},
  onError:(errror)=>{}
   });

Options

roleName : string
- Required
- Trixta role name
actionName : string
- Required
- Trixta action name
actionParameters: see related submitTrixtaActionResponse parameters
loadingStatusRef: string
- Optional
- Optional value to change the default isInProgress behaviour for when submitting actions. If you plan to use the same action name for the same role, on the same screen, this is when you would make use of this * property
options: { debugMode, autoSubmit, setTimeoutEventAsErrorEvent, clearResponsesOnCallback }
- debugMode: boolean
  - Optional
  - Defaults to false.
  - If set to true, enables Trixta console debugging
- autoSubmit: boolean
  - Optional
  - Defaults to false.
  - If set to true, hook will submit actionParameters to actionName when the component mounts.
- setTimeoutEventAsErrorEvent: boolean
  - Optional
  - Defaults to false.
  - If set to true, will set the actionParameters timeoutEvent to be the same as the errorEvent
- clearResponsesOnCallback: boolean
  - Optional
  - Defaults to false.
  - If set to true, will clear all responses when onSuccess or onError callbacks are called returning a value true.
onSuccess : (success: TSuccessType) => void|boolean
- Optional
- This function will fire any time a successful response is received from Trixta.
- If you return true and clearResponsesOnCallback is true, all responses will be cleared.
onError : (error: TErrorType) => void|boolean
- Optional
- This function will fire any time an error response is received from Trixta.
- If you return true and clearResponsesOnCallback is true, all responses will be cleared.

Returns

hasRoleAccess : boolean
- Will be true if the roleName has access for this user.
isInProgress : boolean
- Will be true if there is no response yet after calling submitTrixtaActionResponse or submitTrixtaAction.
- Will be false if there is a response after calling submitTrixtaActionResponse or submitTrixtaAction
hasResponse : boolean
- Will be true if there is at least one Trixta Instance response.
loading : boolean
- Will be true if the action is waiting to be loaded.
response : TrixtaInstanceResponse
- First or most recent Trixta instance response
latestInstance : TrixtaInstance
- First or most recent Trixta instance
submitTrixtaAction : (parameters: SubmitTrixtaFunctionParameters) => void
- This function will submit a request for the given roleName and actionName
clearActionResponses : () => void
- This function will clear and reset responses for the given roleName and actionName.

useTrixtaActionReaction

React hook used to interact with a Trixta action and reaction for a given roleName. This hook uses a combination of both the useTrixtaAction and useTrixtaReaction hooks.

import { useTrixtaActionReaction } from '@trixtateam/trixta-js-core';
const { 
hasRoleAccess,
initialData,
isInProgress,
hasResponse,
hasActionResponse,
hasReactionResponse,
loading,
actionResponse,
reactionResponse,
submitTrixtaActionResponse,
submitTrixtaReactionResponse,
clearActionResponses,
clearReactionResponses,
} = useTrixtaActionReaction<TInitialData,
TActionResponseType,
TActionErrorType,
TReactionResponseType,
TReactionErrorType
>({ 
  actionProps:{
    roleName:"",
    actionName:"",
  },
  reactionProps:{
    roleName:"",
    reactionName:"",
  },
  autoSubmit:false,
  actionParameters:{
    data:{},
    extraData:{},
    timeout:1500,
    timeoutEvent:"",
    loadingStatusRef:"",
    requestEvent:"",
    responseEvent:"",
    errorEvent:""
  }
   });

Options

actionProps: { roleName, actionName }
- roleName : string
  - Required
  - Trixta role name
- actionName : string
  - Required
  - Trixta action name
reactionProps: { roleName, reactionName, requestForEffect }
- roleName : string?
  - Optional
  - Trixta role name
  - If the roleName for actionProps is the same, this can be excluded
- reactionName : string
  - Required
  - Trixta reaction name
- requestForEffect: boolean
  - Optional
  - Defaults to false.
  - If set to true, this Trixta reaction is not waiting for a response and the only expect to use the initialData
actionParameters: see related submitTrixtaActionResponse parameters
autoSubmit: boolean
- Optional
- Defaults to false.
- If set to true, hook will submit actionParameters to actionName when the component mounts.

Returns

hasRoleAccess : boolean
- Will be true if the roleName has access for this user.
isInProgress : boolean
- value is based on useTrixtaAction or useTrixtaReaction
hasActionResponse : boolean
- value is based on hasResponse from useTrixtaAction
hasReactionResponse : boolean
- value is based on hasResponse from useTrixtaReaction
initialData : TInitialData on TrixtaReactionInstance
- Initial data returned from Trixta reaction instance
hasResponse : boolean
- value is based on hasReactionResponse or hasActionResponse .
loading : boolean
- value is based on useTrixtaAction or useTrixtaReaction.
reactionResponse : TrixtaInstanceResponse
- value is based on latestResponse from useTrixtaReaction
actionResponse : TrixtaInstance
- value is based response from useTrixtaAction
submitTrixtaActionResponse : (parameters: SubmitTrixtaFunctionParameters) => void
- function is based on submitTrixtaAction from useTrixtaAction
clearActionResponses : () => void
- function is based on clearActionResponses from useTrixtaAction
clearReactionResponses : () => void
- function is based on clearReactionResponses from useTrixtaReaction
submitTrixtaReactionResponse : (parameters: SubmitTrixtaFunctionParameters) => void
- function is based on submitTrixtaReaction from useTrixtaReaction

useTrixtaSpace

A react hook that will attempt to connect to the passed Trixta space and optional params, on mount of component. This hook should be used in the entry point of your react application.

import { useTrixtaSpace } from '@trixtateam/trixta-js-core';
useTrixtaSpace({space,params});

Options

space : string
- Required
- Trixta space to connect to
params : Object | unknown
- Optional
- Any optional params when you connect to the Trixta space

Returns

This hook returns nothing

useTrixtaRoles

A react hook that will attempt to join the passed array of roles, on mount of component.

import { useTrixtaRoles } from '@trixtateam/trixta-js-core';
useTrixtaRoles({ roles });

Options

roles : Array<TrixtaRoleParameter>
- Required
- An array of roles with their name and any optional additionalData you wish to pass

Returns

The hook returns nothing.

useTrixtaAuth

A react hook that will return authentication and authorization info.

import { useTrixtaAuth } from '@trixtateam/trixta-js-core';
const { 
isAuthenticated,
hasRole,
hasAccess,
isAuthorizing 
} = useTrixtaAuth({ roleName });

Options

roleName : string?
- Optional
- Trixta role name

Returns

isAuthenticated : boolean
- Will be true if the Trixta space connected with token parameter.
hasRole : boolean
- Will be true if the passed roleName for the current user has access.
hasAccess : boolean
- Will be true if the hasRole and isAuthenticated mentioned above is true.
isAuthorizing : boolean
- Will be true if Trixta is still authorizing the above mentioned roleName

useTrixtaAccess

A react hook that will return true if the given roleName has access.

import { useTrixtaAccess } from '@trixtateam/trixta-js-core';
const hasAccess = useTrixtaAccess({ roleName });

Options

roleName : string
- Trixta role name

Returns

boolean
- Will be true if the roleName mentioned above has access.

useTrixtaRoleUnmount

A react hook that will attempt to leave the passed roleName, on unmount of component.

import { useTrixtaRoleUnmount } from '@trixtateam/trixta-js-core';
useTrixtaRoleUnmount({ roleName });

Options

roleName : string
- Trixta role name

Returns

This hook returns nothing

Redux Selectors

Reaction Related Selectors

See reaction related selectors

Action Related Selectors

See action related selectors

Other Selectors

See other selectors that is not related to actions or reactions

Trixta Reducer

Here you can find more information on the Trixta Reducer

Preview of Trixta state

Trixta Space

Here you find all information related to a Trixta space.

What is a Trixta Space?

Trixta Interactions

Here you will find all information related to Trixta Roles, Actions, Reactions

What are Trixta Roles?

What are Trixta Actions?

What are Trixta Reactions?