@onextech/react-hocs

Higher Order Components for react

Stats

StarsIssuesVersionUpdatedCreatedSize
@onextech/react-hocs
000.0.603 years ago3 years agoMinified + gzip package size for @onextech/react-hocs in KB

Readme

nod

NPM version Build Status Coverage Status

NodeJS module generator/boilerplate.

Features

  • Babel - Write next generation JavaScript today;
  • Jest - JavaScript testing framework used by Facebook;
  • ESLint - Make sure you are writing a quality code;
  • Flow - A static type checker for JavaScript used heavily within Facebook;
  • Travis CI - Automate tests and linting for every push or pull request;
  • Documentation - A documentation system so good, you'll actually write documentation.

Install

The easiest way to use nod is through the Yeoman Generator.

$ npm install -g yo generator-nod
$ yo nod

If you don't want to use the generator, you can also download or git clone this repo

$ git clone https://github.com/diegohaz/nod my-module
$ cd my-module
$ rm -rf .git
$ npm install # or yarn

Just make sure to edit package.json, README.md and LICENSE files accordingly with your module's info.

Commands

$ npm test # run tests with Jest
$ npm run coverage # run tests with coverage and open it on browser
$ npm run lint # lint code
$ npm run docs # generate docs
$ npm run build # generate docs and transpile code
$ npm run watch # watch code changes and run scripts automatically
$ npm run patch # bump patch version and publish to npm e.g. 0.0.1
$ npm run minor # bump minor version and publish to npm e.g. 0.1.0
$ npm run major # bump major version and publish to npm e.g. 1.0.0

Built with Nod

You can use those modules as a reference when creating yours. If you have built something with Nod, send a PR (try to write a helpful description for Nod users).

More examples

API

withSetState

Recompose's setState callback Note that we have to use withState for this to work Because withStateHanders does not support callbacks

Parameters

  • initialState

withForm

Build a form

Parameters

  • fields Array<Object>
  • options {} (optional, default {})

Returns function (any?)

setInitialForm

Set fields with initialValue prop

Parameters

  • record {}
  • props {}

Returns {}

withFormFields

Define field props in an array of objects for form to render later

getResolvedProps

Pass props to field properties if they are a function

Parameters

  • field {}
  • props {}

Returns {} resolvedProps

withFormOptions

Add form option props to pass into form components

withFormHandlers

Define form state and handlers

Parameters

Returns function (any?)

getPrefilledRecord

Return object with prefilled data

Parameters

  • prefilledData {}

Returns {}

setDefaultValue

Set defaultValue of date-related components with values extracted from graphql responses. Note that we have to set initialise a new JS date object before passing it to moment for ant design's consumption

Parameters

  • value string
  • fallbackValue any (optional, default null)

Returns (Moment | any)

FroalaEditor

Fix issues with SSR (Require Editor JS files)

FroalaEditorView

Fix issues with SSR (Require Editor JS files)

Field

Return Semantic UI Field

Parameters

  • $0 Object
    • $0.onChange
    • $0.name
    • $0.path
    • $0.value
    • $0.isInRecord
    • $0.required
    • $0.hidden
    • $0.rest ...any

valueToFileList

Convert form value to fileList component prop

Parameters

  • value [{}]

fileListToValue

Convert fileList component prop to form value

Parameters

  • fileList [{}]

Returns Array<any>

makeSelectOptionsFromConstants

Make field select options

Parameters

Returns Array

makeSelectOptionsFromNode

Make select field options from a graphql node collection

Parameters

License

MIT © Diego Haz

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.