Callable components, that can be called from anywhere in your application.
npm install react-callableDespite that sad fact, all contributions are still welcomed and appreciated because they allow this project to move further and evolve.
Main purpose of that library is to allow the creation of any type of callable components.
In ideal, that means, that you're able to create your own callable modal dialogs, messages on different screensides, tooltips, popovers and so on.
It does not mean, that react-callable will do all the stuff.
It just gives some sort of help.
``bash`
npm i --save react-callable
orbash`
yarn add react-callable
##### createCallable
`javascript`
import { createCallable } from 'react-callable';
Function that accepts an object of settings with following structure:
###### 1. async
Type: boolean
Defines, whether callable will return promise
###### 2. arguments
Type: Array
If defined, then on callable call you should pass arguments in the same order as defined in your arguments property.
###### 3. callableId
Type: number | string
Is used in callable container creation.
###### 4. customRoot
Type: element | function | string
By default callable is rendered in outside-root,
that is created when first createCallable is called.
But sometimes, we would want to render it in some other place.
To make this we can use customRoot.
It accepts three type of data:
1. string
2. node reference
3. function
String will be used as a query selector to find dom node.
Function will be resolved on callable call and should return dom node.
###### 5. dynamicRoot
Type: boolean
It allows to pass reference to a target element as the very last argument into a call (at least it should be second arg, take it into account, examples below)
###### 6. directInjection
Type: boolean
If passed, then callable will be rendered without any wrappers inside specified customRoot
Also you can pass no params at all into createCallable. (see Plain callable)
##### Confirm/index.js
`javascript
import { createCallable } from "react-callable";
const confirmCreator = createCallable({ async: true, arguments: ['title', 'description', 'submitStatus', 'cancelStatus'], callableId: 1 });
const Confirm = ({ title, description, submitStatus, cancelStatus, conclude }) => {
return (
{description}
const confirm = confirmCreator(Confirm);
export default confirm;
`
##### App.js
`javascript
import React, {Component} from 'react';
import confirm from './components/Confirm';
import classNames from './styles.module.scss';
class App extends Component {
openConfirm = () => {
confirm('Hello World', 'Called by React Callable', 'submitted', 'cancelled').then((response) => alert(confirm is ${response}));
};
render() {
return (
export default App;
`
##### Confirm/index.js
`javascript
import { createCallable } from "react-callable";
const confirmCreator = createCallable({ async: true, arguments: ['title', 'description', 'onSubmit', 'onCancel'], callableId: 1 });
const Confirm = ({ title, description, onSubmit, onCancel, conclude }) => {
return (
{description}
const confirm = confirmCreator(Confirm);
export default confirm;
`
##### App.js
`javascript
import React, {Component} from 'react';
import confirm from './components/Confirm';
import classNames from './styles.module.scss';
class App extends Component {
openConfirm = () => {
confirm('Hello World', 'Called by React Callable', () => console.log('Harry'), () => console.log('Volan'));
};
render() {
return (
export default App;
`
Now I will try to show only main differences. Sorry, but code takes a lot of space.
`javascript
import { createCallable } from "react-callable";
// create confirm with 4 arguments and enable passing root as very last argument
const confirmCreator = createCallable({
arguments: [
'title',
'description',
'onSubmit',
'onCancel'
],
dynamicRoot: true
});
// assume that Confirm was already defined somewhere
const confirm = confirmCreator(Confirm);
// because we turned on dynamicRoot,
// confirm will look for the very last argument,
// i.e. argument, that is be placed after all arguments,
// described in createCallable function
confirm(
'Are you sure?',
"You're going to do something?",
() => alert('Just do it!'),
() => alert("It's time to stop!"),
document.querySelector('body > .custom-container')
)
`
`javascript
import { createCallable } from "react-callable";
// create confirm with 4 arguments and enable passing root as very last argument
const confirmCreator = createCallable();
// assume that Confirm was already defined somewhere
const confirm = confirmCreator(Confirm);
// as soon as we didn't declare arguments createCallable
// callable will assume, that the very first argument of confirm call is your props
// and will be pass as is to the component + callable special conclude prop for concluding itself``
confirm({
title: 'Are you sure?',
description: "You're going to do something?",
onSubmit: () => alert('Just do it!'),
onCancel: () => alert("It's time to stop!"),
})
To be honest, I made this package for self-usage, but I will be proud, if someone else will find it useful.