Skip to content

c8r/react-scope-provider

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-scope-provider

npm i react-scope-provider
// App.js
import React from 'react'
import { ScopeProvider } from 'react-scope-provider'
import View from './View'
import scope from './scope'

export default () => (
  <ScopeProvider scope={scope}>
    <View />
  </ScopeProvider>
)
// View.js
import React from 'react'
import { ScopeConsumer } from 'react-scope-provider'

export default props => (
  <ScopeConsumer>
    {({
      // scope can be any value, even React components
      Box,
      Heading,
    }) => (
      <Box>
        <Heading>View</Heading>
      </Box>
    )}
  </ScopeConsumer>
)

A default scope can be provided to the consumer when it's used outside of a provider.

// View.js with default scope
import React from 'react'
import { ScopeConsumer } from 'react-scope-provider'

export default props => (
  <ScopeConsumer defaultScope={scope}>
    {({
      Box,
      Heading,
    }) => (
      <Box>
        <Heading>View</Heading>
      </Box>
    )}
  </ScopeConsumer>
)

HOC

import React from 'react'
import { withScope } from 'react-scope-provider'

export default withScope(({
  scope: {
    Box,
    Heading
  }
}) => (
  <Box>
    <Heading>Hello</Heading>
  </Box>
))

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published