Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hooks API #648

Merged
merged 4 commits into from Jan 6, 2019

Conversation

@robinweser
Copy link
Owner

commented Dec 18, 2018

Description

This PR adds an experimental hook to the react-fela package. (Not available in preact-fela or inferno-fela atm).

Example

If required, add a code example or a link to a working example (repository).

// basic usage
importuseFela } from 'react-fela'

function Button() {
  const { css } = useFela()

  return <div className={css({ color: 'red' })}>Hello</div>
}

// passing props
const rule = ({ color }) => ({ color })

function Button(props) {
  const { css } = useFela(props)

  return <div className={css(rule)}>Hello</div>
}

render(<Button color="red" />)

// overloading css (great for extending)
function Button() {
  const { css } = useFela()

  // will render blue text on red background
  return <div className={css({ color: 'red', backgroundColor: 'red' }, { color: 'blue' )}>Hello</div>
}

Checklist

Quality Assurance

You can also run yarn run check to run all 4 commands at once.

  • The code was formatted using Prettier (yarn run format)
  • The code has no linting errors (yarn run lint)
  • All tests are passing (yarn run test)
  • There are no flow-type errors (yarn run flow)

Changes

If one of the following checks doesn't make sense due to the type of PR, just check them.

  • Tests have been added/updated
  • Documentation has been added/updated
  • My changes have proper flow-types
@TxHawks

This comment has been minimized.

Copy link
Collaborator

commented on ea1d09e Dec 18, 2018

LGTM :shipit:

robinweser added 2 commits Jan 6, 2019
@robinweser robinweser merged commit 8a8ceac into master Jan 6, 2019
0 of 2 checks passed
0 of 2 checks passed
continuous-integration/travis-ci/pr The Travis CI build is in progress
Details
continuous-integration/travis-ci/push The Travis CI build is in progress
Details
@robinweser robinweser deleted the hooks branch Jan 6, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.