@element-public/react-text-bubble
v1.0.0
Published
A multi-step container for Element React
Downloads
4
Keywords
Readme
TextBubble
Description
Text in a bubble.
See live demos on storybook
Install bundle from npm-e
npm i @element-public/react-components @element-public/themes
Optional: install the component individually
npm i @element-public/react-text-bubble @element-public/themes
Open ~/.npmrc
in an editor and add the following line to enable the @element-public
scope:
@element-public:registry=https://npm.platforms.engineering
Troubleshooting
See below if you have never installed a package from Bayer's npm-enterprise or run into the following error:
npm ERR! code E401
npm ERR! Unable to authenticate, your authentication token seems to be invalid.
npm ERR! To correct this please trying logging in again with:
npm ERR! npm login
Setup an access token
See the
devtools npm-e guide
to learn how to create an access token if this is the first time you are using a
npm-e package at Bayer or you do not have a line that starts with the following
in your ~/.npmrc
file:
//npm.platforms.engineering/:_authToken=
Text Bubble Props
| Name | Type | Default | Required | Description |
| ---------- | ------------------------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| bubbleSize | string | 'default' | false | Make the bubble smaller.Accepted Values: default, small |
| tag | string|React.ElementType | 'div' | false | Optionally override the default component of div
. |
| themeColor | string | 'primary' | false | Color of the badge.Accepted Values: primary, secondary, danger, danger-alt, success, muted, blue, gray, green, orange, purple, red, teal, yellow, background |
| variant | string | 'filled' | false | The style of the TextBubble.Accepted Values: filled, outlined |
Text Bubble Render Props
| Name | Type | Default | Required | Description | | ---- | --------------- | ------- | -------- | --------------------------------------------- | | text | React.ReactNode | null | false | Content for the bubble, should be 1 character |