3.1.0 • Published 15 days ago

betterplace-react-components v3.1.0

Weekly downloads
31
License
Apache-2.0
Repository
github
Last release
15 days ago

npm Version Build Status peerDependencies Status devDependencies Status Dependency Status

betterplace-react-components

Development

For recommended vscode setup run yarn setup-vscode or npm run setup-vscode & then install workspace @recommended extensions. Note that src/javascript/apiV4.ts is autogenerated and needs to be manually copied over if relevant API parts change.

Installation

With yarn:

yarn add betterplace-react-components

With npm:

npm i betterplace-react-components

Usage

import { ProjectTeaser } from 'betterplace-react-components'

<ProjectTeaser project={betterplaceOrgApiV4Response}>
import { FacebookButton } from 'betterplace-react-components'

<FacebookButton shape='round' shareUrl='www.foo.bar' />

etc. - run yarn start to get a preview of all components.

Share buttons with utm_params

<FacebookButton
  shape='round'
  shareUrl='www.foo.bar'
  utmParams={{ utm_campaign: 'user_share', utm_medium: 'foo', utm_source: 'bar' }}
/>

Share Button Props

Required propsOptional props
AllshareUrl URL of the shared page (string)shape round Render a round sharing button without content(string)square Render a square sharing button without content (string)minimal Render a rectangle share button with icon and contentfull Render a rounded share button with icon and contentboxShadow Add a bottom box shadow to the icon (boolean) - only for full and round shapes so farutmParams: Representation of the utmParams to be attached to the shareUrl (object)beforeOnClick: Add additional behaviour to the click action (function)content: Button content to that needs to be set with minimal button option (string)title: title attribute for the <button> element (string)color: Color that overrides the default button color
FacebookButton--
FacebookMessengerButtonfacebookAppId: Facebook App ID of your platform (string)-
TwitterButton--
TelegramButton-teaser: Intro text for the sharing message (string)
WhatsappButton-teaser: Intro text for the sharing message (string)
EmailButton-subject: Subject of the email(string)teaser: Intro text for the sharing message (string)
LinkButton--
InstagramButton--

Sharing with custom markup

You can also use the click action handler only in case you want to use custom styled buttons.

import { facebookShareAction } from 'betterplace-react-components'

const MyShareButton = () => {
  const handleClick = () => facebookShareAction({
    shareUrl: 'www.foo.bar',
    utmParams: { utm_campaign: 'user_share', utm_medium: 'foo', utm_source: 'bar' }
  })

  return <span onClick={handleClick}>i luv facebook</span>
}

Customization

There is no theming support yet. Some styles can be set via props, e.g.

<ProjectTeaser progressbarColor='#0000ff' />

Development

Install development / testing dependencies:

yarn

Run hot-reloading preview:

yarn start

Run tests:

yarn test

Release a new version:

yarn publish

License

betterplace-react-components is released under the Apache 2.0 license and Copyright 2018..2022 gut.org gAG.

3.1.0

15 days ago

3.0.16

6 months ago

3.0.15

6 months ago

3.0.13

2 years ago

3.0.14

2 years ago

3.0.12

2 years ago

3.0.11

2 years ago

3.0.10

2 years ago

3.0.9

2 years ago

3.0.8

2 years ago

3.0.7

2 years ago

3.0.4

2 years ago

3.0.6

2 years ago

3.0.5

2 years ago

3.0.3

3 years ago

3.0.2

3 years ago

3.0.1

3 years ago

3.0.0

3 years ago

2.0.12

3 years ago

2.0.11

3 years ago

2.0.10

3 years ago

2.0.9

3 years ago

2.0.8

3 years ago

2.0.7

3 years ago

2.0.5

4 years ago

2.0.4

4 years ago

2.0.3

4 years ago

2.0.2

4 years ago

2.0.1

4 years ago

2.0.0

4 years ago

1.24.0

4 years ago

1.23.0

4 years ago

1.22.0

4 years ago

1.21.0

4 years ago

1.20.0

4 years ago

1.19.0

4 years ago

1.18.0

4 years ago

1.17.0

4 years ago

1.16.0

4 years ago

1.15.0

4 years ago

1.14.0

4 years ago

1.13.0

4 years ago

1.12.0

4 years ago

1.11.0

4 years ago

1.10.0

4 years ago

1.9.2

4 years ago

1.9.1

4 years ago

1.9.0

4 years ago

1.8.3

5 years ago

1.8.2

5 years ago

1.8.1

5 years ago

1.8.0

5 years ago

1.7.1

6 years ago

1.7.0

6 years ago

1.6.13

6 years ago

1.6.12

6 years ago

1.6.11

6 years ago

1.6.10

6 years ago

1.6.9

6 years ago

1.6.8

6 years ago

1.6.7

6 years ago

1.6.6

6 years ago

1.6.5

6 years ago

1.6.4

6 years ago

1.6.3

6 years ago

1.6.2

6 years ago

1.6.1

6 years ago

1.6.0

6 years ago

1.5.4

6 years ago

1.5.3

6 years ago

1.5.2

6 years ago

1.5.1

6 years ago

1.5.0

6 years ago

1.4.0

6 years ago

1.3.0

6 years ago

1.2.0

6 years ago

1.1.0

6 years ago

1.0.0

6 years ago