import components from create-react-library subfolder

user_9795038 0
Viewed 429

I have been trying to use create-react-library and so far it works, but I can only import components successfully from index.js. If I try to make another file , I recieve an import error.

The file structure is as such 

example
  \ Node Module
  \ public 
  \ src
     | App.js
     | index.js
      ...
src
  \ Patterns
  | index.js
  | button.js

Currently I can only successfully import components from index.js of the main src. Is there a way to successfully import components from folders such as Patterns or another file?

\ App.js ( example ) Importing button gives me an error "Cant import button from neo" 

import React from 'react'

import { ExampleComponent,Button} from 'neo'
import {Test} from 'neo/Patterns';


import 'neo/dist/index.css'

const App = () => {
  return (
  <>
  <Test />
  <Button text='Click me' />
   <ExampleComponent text="Create React Library Example " />
  </>
  )
}

export default App
reactjs components
1 Answers

Please check if this is what you're trying to achieve.

index.js will be exporting required components like this,

import ExampleComponent from './ExampleComponent/ExampleComponent';
// ExampleComponent is placed inside a folder named ExampleComponent

import Patterns from './Patterns/Patterns';
// Patterns is placed inside a folder named Patterns

export { ExampleComponent, Patterns };

Patterns.js can look like this,

import React from 'react'

const Patterns = () => {
  return <div>Patterns Component sample</div>
}

export default Patterns;

ExampleComponent.js can look like this,

import React from 'react'
import styles from './styles.module.css'

const ExampleComponent = ({ text }) => {
  return <div className={styles.test}>Example Component: {text}</div>
}

export default ExampleComponent;

In the consumer level (in this case, example folder), in any jsx, like App.js you can refer those exported components like,

import { ExampleComponent, Patterns } from 'neo'

return (
 <Patterns />
)
user_110271910
Related