New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-box-text

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-box-text - npm Package Compare versions

Comparing version 1.1.0 to 2.0.0

4

dist/index.es.js

@@ -1,2 +0,2 @@

import{jsxs as n,jsx as e}from"react/jsx-runtime";import t from"react";import o from"styled-components";
import n from"react";import o from"styled-components";
/*! *****************************************************************************

@@ -15,3 +15,3 @@ Copyright (c) Microsoft Corporation.

PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */var r=function(){return(r=Object.assign||function(n){for(var e,t=1,o=arguments.length;t<o;t++)for(var r in e=arguments[t])Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}).apply(this,arguments)};function i(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}!function(n,e){void 0===e&&(e={});var t=e.insertAt;if(n&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=n:r.appendChild(document.createTextNode(n))}}(".App {\n text-align: center;\n}\n\n.App-logo {\n height: 40vmin;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .App-logo {\n animation: App-logo-spin infinite 20s linear;\n }\n}\n\n.App-header {\n background-color: #282c34;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}\n\n.App-link {\n color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n");var a,d,s,l,p,u,c={Container:o.div(a||(a=i(["\n position:relative;\n display:inline-block;\n background:white;\n padding:4px;\n width:150px;\n border-style:dashed;\n border-color:blue;\n border-width:1px;\n "],["\n position:relative;\n display:inline-block;\n background:white;\n padding:4px;\n width:150px;\n border-style:dashed;\n border-color:blue;\n border-width:1px;\n "]))),DotOne:o.div(d||(d=i(["\n top:0;\n left:0;\n transform:translate(-50%,-50%);\n position: absolute;\n background: blue;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "],["\n top:0;\n left:0;\n transform:translate(-50%,-50%);\n position: absolute;\n background: blue;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "]))),DotTwo:o.div(s||(s=i(["\n top:0;\n right:0;\n transform:translate(50%,-50%);\n \n position: absolute;\n background: blue;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "],["\n top:0;\n right:0;\n transform:translate(50%,-50%);\n \n position: absolute;\n background: blue;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "]))),DotThree:o.div(l||(l=i(["\n top:100%;\n left:0;\n transform:translate(-50%,-50%);\n \n position: absolute;\n background: blue;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "],["\n top:100%;\n left:0;\n transform:translate(-50%,-50%);\n \n position: absolute;\n background: blue;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "]))),DotFour:o.div(p||(p=i(["\n top:100%;\n right:0;\n transform:translate(50%,-50%);\n position: absolute;\n background: blue;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "],["\n top:100%;\n right:0;\n transform:translate(50%,-50%);\n position: absolute;\n background: blue;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "])))},h=o.span(u||(u=i(["\ncolor:blue;\ndisplay:flex;\njustify-content:center;\n"],["\ncolor:blue;\ndisplay:flex;\njustify-content:center;\n"])));function f(o){var i=o.texts,a=t.useState("Buy"),d=a[0],s=a[1],l=t.useState(0),p=l[0],u=l[1],f=t.useState("fade-in"),b=f[0],g=f[1];return t.useEffect((function(){var n=setInterval((function(){"fade-in"===b?g("fade-out"):(g("fade-in"),p<i.length-1?u(p+1):u(0),s((function(){return i[p]})))}),1e3);return function(){return clearInterval(n)}}),[b,p,i]),n(c.Container,{children:[e(c.DotOne,{},void 0),e(c.DotTwo,{},void 0),e(c.DotThree,{},void 0),e(c.DotFour,{},void 0),e(h,r({className:b},{children:d}),void 0)]},void 0)}export default f;
***************************************************************************** */function r(n,o){return Object.defineProperty?Object.defineProperty(n,"raw",{value:o}):n.raw=o,n}var t,e,d,i,a,l,u={Container:o.div(t||(t=r(["\n position:relative;\n display:inline-block;\n background-color:",";\n padding:4px;\n width:150px;\n border-style:dashed;\n border-color:",";;\n border-width:1px;\n "],["\n position:relative;\n display:inline-block;\n background-color:",";\n padding:4px;\n width:150px;\n border-style:dashed;\n border-color:",";;\n border-width:1px;\n "])),(function(n){return"undefined"!==n.backgroundColor?n.backgroundColor:"transparent"}),(function(n){return"undefined"!==n.borderColor?n.borderColor:"#ddd"})),DotOne:o.div(e||(e=r(["\n top:0;\n left:0;\n transform:translate(-50%,-50%);\n position: absolute;\n background-color:",";\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "],["\n top:0;\n left:0;\n transform:translate(-50%,-50%);\n position: absolute;\n background-color:",";\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "])),(function(n){return"undefined"!==n.dotColor?n.dotColor:"#ddd"})),DotTwo:o.div(d||(d=r(["\n top:0;\n right:0;\n transform:translate(50%,-50%);\n position: absolute;\n background-color:",";\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "],["\n top:0;\n right:0;\n transform:translate(50%,-50%);\n position: absolute;\n background-color:",";\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "])),(function(n){return"undefined"!==n.dotColor?n.dotColor:"#ddd"})),DotThree:o.div(i||(i=r(["\n top:100%;\n left:0;\n transform:translate(-50%,-50%);\n position: absolute;\n background-color:",";\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "],["\n top:100%;\n left:0;\n transform:translate(-50%,-50%);\n position: absolute;\n background-color:",";\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "])),(function(n){return"undefined"!==n.dotColor?n.dotColor:"#ddd"})),DotFour:o.div(a||(a=r(["\n top:100%;\n right:0;\n transform:translate(50%,-50%);\n position: absolute;\n background-color:",";\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "],["\n top:100%;\n right:0;\n transform:translate(50%,-50%);\n position: absolute;\n background-color:",";\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "])),(function(n){return"undefined"!==n.dotColor?n.dotColor:"#ddd"}))},s=o.span(l||(l=r(["\ncolor:",";\ndisplay:flex;\njustify-content:center;\n"],["\ncolor:",";\ndisplay:flex;\njustify-content:center;\n"])),(function(n){return"undefined"!==n.textColor?n.textColor:"inherit"}));function c(o){var r=o.texts,t=o.backgroundColor,e=o.textColor,d=o.borderColor,i=o.dotColor,a=n.useState(r[0]),l=a[0],c=a[1],p=n.useState(0),f=p[0],b=p[1],h=n.useState("fade-in"),x=h[0],g=h[1];return n.useEffect((function(){var n=setInterval((function(){"fade-in"===x?g("fade-out"):(g("fade-in"),f<r.length-1?b(f+1):b(0),c((function(){return r[f]})))}),1e3);return function(){return clearInterval(n)}}),[x,f,r]),n.createElement(u.Container,{backgroundColor:""+t,borderColor:""+d},n.createElement(u.DotOne,{dotColor:""+i}),n.createElement(u.DotTwo,{dotColor:""+i}),n.createElement(u.DotThree,{dotColor:""+i}),n.createElement(u.DotFour,{dotColor:""+i}),n.createElement(s,{textColor:""+e},l))}export default c;
//# sourceMappingURL=index.es.js.map

17

dist/index.js

@@ -1,2 +0,17 @@

"use strict";var n=require("react/jsx-runtime"),e=require("react"),t=require("styled-components");function r(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}var o=r(e),i=r(t),a=function(){return(a=Object.assign||function(n){for(var e,t=1,r=arguments.length;t<r;t++)for(var o in e=arguments[t])Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n}).apply(this,arguments)};function d(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}!function(n,e){void 0===e&&(e={});var t=e.insertAt;if(n&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===t&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=n:o.appendChild(document.createTextNode(n))}}(".App {\n text-align: center;\n}\n\n.App-logo {\n height: 40vmin;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .App-logo {\n animation: App-logo-spin infinite 20s linear;\n }\n}\n\n.App-header {\n background-color: #282c34;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}\n\n.App-link {\n color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n");var s,l,u,p,c,f,h={Container:i.default.div(s||(s=d(["\n position:relative;\n display:inline-block;\n background:white;\n padding:4px;\n width:150px;\n border-style:dashed;\n border-color:blue;\n border-width:1px;\n "],["\n position:relative;\n display:inline-block;\n background:white;\n padding:4px;\n width:150px;\n border-style:dashed;\n border-color:blue;\n border-width:1px;\n "]))),DotOne:i.default.div(l||(l=d(["\n top:0;\n left:0;\n transform:translate(-50%,-50%);\n position: absolute;\n background: blue;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "],["\n top:0;\n left:0;\n transform:translate(-50%,-50%);\n position: absolute;\n background: blue;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "]))),DotTwo:i.default.div(u||(u=d(["\n top:0;\n right:0;\n transform:translate(50%,-50%);\n \n position: absolute;\n background: blue;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "],["\n top:0;\n right:0;\n transform:translate(50%,-50%);\n \n position: absolute;\n background: blue;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "]))),DotThree:i.default.div(p||(p=d(["\n top:100%;\n left:0;\n transform:translate(-50%,-50%);\n \n position: absolute;\n background: blue;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "],["\n top:100%;\n left:0;\n transform:translate(-50%,-50%);\n \n position: absolute;\n background: blue;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "]))),DotFour:i.default.div(c||(c=d(["\n top:100%;\n right:0;\n transform:translate(50%,-50%);\n position: absolute;\n background: blue;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "],["\n top:100%;\n right:0;\n transform:translate(50%,-50%);\n position: absolute;\n background: blue;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "])))},b=i.default.span(f||(f=d(["\ncolor:blue;\ndisplay:flex;\njustify-content:center;\n"],["\ncolor:blue;\ndisplay:flex;\njustify-content:center;\n"])));module.exports=function(e){var t=e.texts,r=o.default.useState("Buy"),i=r[0],d=r[1],s=o.default.useState(0),l=s[0],u=s[1],p=o.default.useState("fade-in"),c=p[0],f=p[1];return o.default.useEffect((function(){var n=setInterval((function(){"fade-in"===c?f("fade-out"):(f("fade-in"),l<t.length-1?u(l+1):u(0),d((function(){return t[l]})))}),1e3);return function(){return clearInterval(n)}}),[c,l,t]),n.jsxs(h.Container,{children:[n.jsx(h.DotOne,{},void 0),n.jsx(h.DotTwo,{},void 0),n.jsx(h.DotThree,{},void 0),n.jsx(h.DotFour,{},void 0),n.jsx(b,a({className:c},{children:i}),void 0)]},void 0)};
"use strict";var n=require("react"),o=require("styled-components");function t(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}var r=t(n),e=t(o);
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
function d(n,o){return Object.defineProperty?Object.defineProperty(n,"raw",{value:o}):n.raw=o,n}var a,i,l,u,s,f,c={Container:e.default.div(a||(a=d(["\n position:relative;\n display:inline-block;\n background-color:",";\n padding:4px;\n width:150px;\n border-style:dashed;\n border-color:",";;\n border-width:1px;\n "],["\n position:relative;\n display:inline-block;\n background-color:",";\n padding:4px;\n width:150px;\n border-style:dashed;\n border-color:",";;\n border-width:1px;\n "])),(function(n){return"undefined"!==n.backgroundColor?n.backgroundColor:"transparent"}),(function(n){return"undefined"!==n.borderColor?n.borderColor:"#ddd"})),DotOne:e.default.div(i||(i=d(["\n top:0;\n left:0;\n transform:translate(-50%,-50%);\n position: absolute;\n background-color:",";\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "],["\n top:0;\n left:0;\n transform:translate(-50%,-50%);\n position: absolute;\n background-color:",";\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "])),(function(n){return"undefined"!==n.dotColor?n.dotColor:"#ddd"})),DotTwo:e.default.div(l||(l=d(["\n top:0;\n right:0;\n transform:translate(50%,-50%);\n position: absolute;\n background-color:",";\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "],["\n top:0;\n right:0;\n transform:translate(50%,-50%);\n position: absolute;\n background-color:",";\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "])),(function(n){return"undefined"!==n.dotColor?n.dotColor:"#ddd"})),DotThree:e.default.div(u||(u=d(["\n top:100%;\n left:0;\n transform:translate(-50%,-50%);\n position: absolute;\n background-color:",";\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "],["\n top:100%;\n left:0;\n transform:translate(-50%,-50%);\n position: absolute;\n background-color:",";\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "])),(function(n){return"undefined"!==n.dotColor?n.dotColor:"#ddd"})),DotFour:e.default.div(s||(s=d(["\n top:100%;\n right:0;\n transform:translate(50%,-50%);\n position: absolute;\n background-color:",";\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "],["\n top:100%;\n right:0;\n transform:translate(50%,-50%);\n position: absolute;\n background-color:",";\n width: 4px;\n height: 4px;\n border-radius: 50%;\n "])),(function(n){return"undefined"!==n.dotColor?n.dotColor:"#ddd"}))},p=e.default.span(f||(f=d(["\ncolor:",";\ndisplay:flex;\njustify-content:center;\n"],["\ncolor:",";\ndisplay:flex;\njustify-content:center;\n"])),(function(n){return"undefined"!==n.textColor?n.textColor:"inherit"}));module.exports=function(n){var o=n.texts,t=n.backgroundColor,e=n.textColor,d=n.borderColor,a=n.dotColor,i=r.default.useState(o[0]),l=i[0],u=i[1],s=r.default.useState(0),f=s[0],b=s[1],h=r.default.useState("fade-in"),x=h[0],g=h[1];return r.default.useEffect((function(){var n=setInterval((function(){"fade-in"===x?g("fade-out"):(g("fade-in"),f<o.length-1?b(f+1):b(0),u((function(){return o[f]})))}),1e3);return function(){return clearInterval(n)}}),[x,f,o]),r.default.createElement(c.Container,{backgroundColor:""+t,borderColor:""+d},r.default.createElement(c.DotOne,{dotColor:""+a}),r.default.createElement(c.DotTwo,{dotColor:""+a}),r.default.createElement(c.DotThree,{dotColor:""+a}),r.default.createElement(c.DotFour,{dotColor:""+a}),r.default.createElement(p,{textColor:""+e},l))};
//# sourceMappingURL=index.js.map

14

package.json
{
"name": "react-box-text",
"version": "1.1.0",
"version": "2.0.0",
"private": false,

@@ -14,4 +14,3 @@ "license": "MIT",

"react": "^17.0.2",
"styled-components": ">= 3",
"typescript": "^4.1.2"
"styled-components": ">= 3"
},

@@ -29,2 +28,3 @@ "devDependencies": {

"autoprefixer": "^9.8.6",
"babel-plugin-styled-components": "^1.13.2",
"postcss": "^8.3.6",

@@ -34,3 +34,4 @@ "rollup-plugin-peer-deps-external": "^2.2.4",

"rollup-plugin-styles": "^3.14.1",
"rollup-plugin-terser": "^7.0.2"
"rollup-plugin-terser": "^7.0.2",
"typescript": "^4.3.5"
},

@@ -63,3 +64,6 @@ "scripts": {

"component"
]
],
"dependencies": {
"@babel/preset-typescript": "^7.14.5"
}
}

66

README.md

@@ -1,46 +0,48 @@

# Getting Started with Create React App
# react-box-text
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
[![NPM](https://img.shields.io/npm/v/react-box-text.svg)](https://www.npmjs.com/package/react-box-text) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
## Available Scripts
## Install
In the project directory, you can run:
```bash
npm install --save react-box-text
```
### `yarn start`
## Screenshot Example
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
![alt text](https://github.com/copy-ninja1/react-box-text/blob/main/image/react-box-text.png?raw=true)
The page will reload if you make edits.\
You will also see any lint errors in the console.
## Props
### `yarn test`
- `texts`: Array of texts to display (required)
- `backgroundColor`: BackgroundColor of the box. (optional)
- `textColor`: textColor of the texts. (optional)
- `borderColor`: borderColor of the box. (optional)
- `dotColor`: dotColor of the box. (optional)
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
## Usage
### `yarn build`
```jsx
import React from "react";
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
const App = () => {
return (
<div>
<BoxText
textColor="#0088ff"
dotColor="#0088ff"
borderColor="#0088ff"
texts={["Look", "Good"]}
></BoxText>
</div>
);
};
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
export default App;
```
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
Made with :heart:
### `yarn eject`
## License
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
MIT © [copy-ninja1](https://github.com/copy-ninja1)
readme.md
dist/index.es.js.map

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc