Export a function as default while destructuring it for uses within the same class

Question

I'm working with the React Context API, and I've got the following as an example

import React, { createContext, useState } from 'react';

const FooContext = createContext({
  bar: false,
  toggleBar: () => {}
});

export const FooContextConsumer = FooContext.Consumer;

export const FooContextProvider = ({ children }) => {
  const [bar, setBar] = useState(false);

  const toggleBar = () => setBar(!bar);

  return (
    <FooContext.Provider value={{ bar, toggleBar }}>
      {children}
    </FooContext.Provider>
  )
};

export default FooContext;

Now, there's a lot of exports going on here. I know that the createContext functions has { Provider, Consumer } destructure properties available. Is there a way I can use that to compact this code? I've got something like this in mind but that isn't valid syntax unfortunately..

import React, { createContext, useState } from 'react';

export default ({ Provider, Consumer }) = createContext({
  bar: false,
  toggleBar: () => {}
});

export const FooContextConsumer = Consumer;

export const FooContextProvider = ({ children }) => {
  const [bar, setBar] = useState(false);

  const toggleBar = () => setBar(!bar);

  return (
    <Provider value={{ bar, toggleBar }}>
      {children}
    </Provider>
  )
};

So, I want to export createContext function as the default, while using the Provider and Consumer properties of that function within the same file. Is this possible?

Of course I can do it with a const and an export default but I was wondering if this is possible as a one-liner.

Muhammad Ali · Accepted Answer · 2020-05-21 16:44:05Z

1

You have to name your context in order to further use it in the file:

import React, { createContext, useState } from 'react';

const Context = createContext({
  bar: false,
  toggleBar: () => {}
});

export const FooContextConsumer = Context.Consumer;

export const FooContextProvider = ({ children }) => {
  const [bar, setBar] = useState(false);

  const toggleBar = () => setBar(!bar);

  return (
    <Context.Provider value={{ bar, toggleBar }}>
      {children}
    </Context.Provider>
  )
};

export default Context;

The implementation I'd recommend for consuming the context:

import React, { createContext, useContext, useState } from 'react';

// ...

export const useFooContext = () => useContext(Context);

// ...

answered May 21, 2020 at 16:44

Muhammad Ali

2,6582 gold badges18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hugo Fovargue · Accepted Answer · 2020-05-21 16:46:14Z

1

I would stick to your first example. It's clear which Context the Consumer, and Provider belong to.

answered May 21, 2020 at 16:46

Hugo Fovargue

314 bronze badges

Collectives™ on Stack Overflow

Export a function as default while destructuring it for uses within the same class

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related