Intellij/WebStorm live template to create a React Context Component with FlowTypes

rci(react-context-initializer).js

// @flow
import * as React from 'react';
import { createContext, useContext, useState } from 'react';

export const $TM_FILENAME_BASE$ = createContext();

export function use$TM_FILENAME_BASE$() {
  return useContext($TM_FILENAME_BASE$);
}

export const $NAME$Consumer = $TM_FILENAME_BASE$.Consumer;

// eslint-disable-next-line react/prop-types
export const $NAME$Provider = ({ children }) => {
  const [state, setState] = useState(null);

  const value = {
    state,
    setState,
  };
  return (
    <$TM_FILENAME_BASE$.Provider value={value}>
      {children}
    </$TM_FILENAME_BASE$.Provider>
  );
};

EXAMPLE:

filename:

• ExampleUIContext.jsx

output:

// @flow
import * as React from 'react';
import { createContext, useContext, useState } from 'react';

export const ExampleUIContext = createContext();

export function useExampleUIContext() {
  return useContext(ExampleUIContext);
}

export const ExampleUIConsumer = ExampleUIContext.Consumer;

// eslint-disable-next-line react/prop-types
export const ExampleUIProvider = ({ children }) => {
  const [state, setState] = useState(null);

  const value = {
    state,
    setState,
  };
  return (
    <ExampleUIContext.Provider value={value}>
      {children}
    </ExampleUIContext.Provider>
  );
};

usage

simply type rci in your new created file

installation

1. Preferences -> Editor -> Live templates -> add live template

2. Copy paste code from gist

3. Define following variables (Click on edit Variable)

Name	Expression
TM_FILENAME_BASE	fileNameWithoutExtension()
NAME	substringBefore(fileNameWithoutExtension(), "Context")

Or import following file: React.xml example

<templateSet group="React">
  <template name="rci" value="// @flow&#10;import * as React from 'react';&#10;import { createContext, useContext, useState } from 'react';&#10;&#10;export const $TM_FILENAME_BASE$ = createContext();&#10;&#10;export function use$TM_FILENAME_BASE$() {&#10;  return useContext($TM_FILENAME_BASE$);&#10;}&#10;&#10;export const $NAME$Consumer = $TM_FILENAME_BASE$.Consumer;&#10;&#10;// eslint-disable-next-line react/prop-types&#10;export const $NAME$Provider = ({ children }) =&gt; {&#10;  const [state, setState] = useState(null);&#10;&#10;  const value = {&#10;    state,&#10;    setState,&#10;  };&#10;  return (&#10;    &lt;$TM_FILENAME_BASE$.Provider value={value}&gt;&#10;      {children}&#10;    &lt;/$TM_FILENAME_BASE$.Provider&gt;&#10;  );&#10;};&#10;" description="Creates a React Context Component with FlowTypes" toReformat="false" toShortenFQNames="true">
    <variable name="TM_FILENAME_BASE" expression="fileNameWithoutExtension()" defaultValue="" alwaysStopAt="true" />
    <variable name="NAME" expression="substringBefore(fileNameWithoutExtension(), &quot;Context&quot;)" defaultValue="" alwaysStopAt="true" />
    <context>
      <option name="JAVA_SCRIPT" value="true" />
    </context>
  </template>
</templateSet>