make-it-readable v1.0.3

make-it-readable

This is a React library to make the code more easy on the eye by using render props.

Install

npm install --save make-it-readable

Components

• If

  If component's main use case is to not use ternary functions inside render.

  • Usage 1

  import React from 'react'
  
  import { If } from 'make-it-readable'
  
  const App = () => {
    return (
      <div>
        <If
          condition={true}
          then={() => <div>Condition is true!</div>}
          else={() => <div>Condition is false!</div>}
        ></If>
      </div>
    )
  }
  
  export default App

  • Usage 2

  import React from 'react'
  
  import { If } from 'make-it-readable'
  
  const App = () => {
    return (
      <div>
        <If condition={false}>
          {() => <div>You can pass your "then function" as a child aswell!</div>}
        </If>
      </div>
    )
  }
  
  export default App

  • Usage 3

  import React from 'react'
  
  import { If } from 'make-it-readable'
  
  const App = () => {
    return (
      <div>
        <If condition={false}>
          {{
            then: () => (
              <div>
                If you want to pass an else function aswell, you can put your
                functions in an object as children of the If component
              </div>
            ),
            else: () => <div>Else</div>
          }}
        </If>
      </div>
    )
  }
  
  export default App

• For

  For component's main use case is to not use mapping functions inside render.

  • Usage 1

      import React from 'react'
    
      import { For } from 'make-it-readable'
    
      const App = () => {
        return (
          <div>
            <For
              arr={['a', 'b', 'c', 'd']}
              render={(item) => <div key={item}>{item}</div>}
            ></For>
          </div>
        )
      }
    
      export default App

  • Usage 2

      import React from 'react'
    
      import { For } from 'make-it-readable'
    
      const App = () => {
        return (
          <div>
            <For arr={['a', 'b', 'c', 'd']}>
              {(item) => <div key={item}>{item}</div>}
            </For>
          </div>
        )
      }
    
      export default App

• Bonus

  import React from 'react'

  import { For, If } from 'make-it-readable'

  const App = () => {
    return (
      <div>
        <For arr={['a', 'b', 'c', 'd']}>
          {(item) => (
            <If condition={item === 'a' || item === 'b'}>
              {{
                then: () => (
                  <div key={item}>
                    <strong>{item}</strong>
                  </div>
                ),
                else: () => <div key={item}>{item}</div>
              }}
            </If>
          )}
        </For>
      </div>
    )
  }

  export default App

License

MIT © KaanAlboy